[pull] master from supabase:master

apps/docs/content/guides/getting-started/mcp.mdx

@@ -241,7 +241,7 @@ We recommend the following best practices to mitigate security risks when using
 
 ## MCP for local Supabase instances
 
-The Supabase MCP server connects directly to the cloud platform to access your database. If you are running a local instance of Supabase, you can instead use the [Postgres MCP server](https://github.com/modelcontextprotocol/servers/tree/main/src/postgres) to connect to your local database. This MCP server runs all queries as read-only transactions.
+The Supabase MCP server connects directly to the cloud platform to access your database. If you are running a local instance of Supabase, you can instead use the [Postgres MCP server](https://github.com/modelcontextprotocol/servers-archived/tree/main/src/postgres) to connect to your local database. This MCP server runs all queries as read-only transactions.
 
 ### Step 1: Find your database connection string
 

apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx

@@ -109,7 +109,7 @@ export const FilterPopoverPrimitive = ({
             ))}
             {localFilters.length == 0 && (
               <div className="space-y-1 px-3">
-                <h5 className="text-sm text-foreground-light">No filters applied to this view</h5>
+                <h5 className="text-foreground-light">No filters applied to this view</h5>
                 <p className="text-xs text-foreground-lighter">
                   Add a column below to filter the view
                 </p>

apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx

@@ -185,7 +185,7 @@ export const SortPopoverPrimitive = ({
       ))}
       {localSorts.length === 0 && (
         <div className="space-y-1 px-3">
-          <h5 className="text-sm text-foreground-light">No sorts applied to this view</h5>
+          <h5 className="text-foreground-light">No sorts applied to this view</h5>
           <p className="text-xs text-foreground-lighter">Add a column below to sort the view</p>
         </div>
       )}

apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx

@@ -25,7 +25,7 @@ export const SpamValidation = ({ validationResult }: SpamValidationProps) => {
         )}
       </div>
       <div className="flex flex-col gap-2">
-        <h5 className="text-sm">
+        <h5>
           {hasSpamWarning
             ? 'Email has a high probability of being marked as spam - review issues below to improve deliverability.'
             : 'Email content is unlikely to be marked as spam'}

apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx

@@ -15,7 +15,7 @@ const TemplatePreview = ({ selectedTemplate }: TemplatePreviewProps) => {
           <div className="my-5 h-full space-y-6 px-6">
             <div className="space-y-2">
               <div className="flex flex-col space-y-2">
-                <h3 className="text-foreground text-base">{templateName}</h3>
+                <h3>{templateName}</h3>
                 <p className="text-foreground-light text-sm">{description}</p>
               </div>
             </div>

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

@@ -122,7 +122,7 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM
       size="small"
       header={
         <div className="flex items-baseline gap-2">
-          <h5 className="text-sm text-foreground">Confirm to enable</h5>
+          <h5 className="text-foreground">Confirm to enable</h5>
           <code className="text-xs">{extension.name}</code>
         </div>
       }

apps/studio/components/interfaces/Home/AdvisorWidget.tsx

@@ -81,7 +81,7 @@ export const AdvisorWidget = () => {
   let titleContent: React.ReactNode
 
   if (totalIssues === 0) {
-    titleContent = <h2 className="text-xl">No issues available</h2>
+    titleContent = <h2>No issues available</h2>
   } else {
     const issuesText = totalIssues === 1 ? 'issue' : 'issues'
     const numberDisplay = totalIssues.toString()
@@ -94,7 +94,7 @@ export const AdvisorWidget = () => {
     }
 
     titleContent = (
-      <h2 className="text-xl">
+      <h2>
         {numberDisplay} {issuesText} need
         {totalIssues === 1 ? 's' : ''} <span className={attentionClassName}>attention</span>
       </h2>

apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx

@@ -25,7 +25,7 @@ const NewProjectPanel = () => {
         <div className="flex flex-col space-y-12 md:space-y-20">
           <div className="flex h-full flex-col justify-between">
             <div className="space-y-2">
-              <h3 className="text-xl text-foreground">Welcome to your new project</h3>
+              <h2>Welcome to your new project</h2>
               <p className="text-base text-foreground-light">
                 Your project has been deployed on its own instance, with its own API all set up and
                 ready to use.
@@ -36,9 +36,7 @@ const NewProjectPanel = () => {
           <div className="grid grid-cols-12 gap-4">
             <div className="col-span-12 flex flex-col justify-center space-y-8 lg:col-span-7">
               <div className="space-y-2">
-                <h3 className="text-xl text-foreground">
-                  Get started by building out your database
-                </h3>
+                <h2>Get started by building out your database</h2>
                 <p className="text-base text-foreground-light">
                   Start building your app by creating tables and inserting data. Our Table Editor
                   makes Postgres as easy to use as a spreadsheet, but there's also our SQL Editor if
@@ -71,7 +69,7 @@ const NewProjectPanel = () => {
           {authEnabled && edgeFunctionsEnabled && storageEnabled && (
             <div className="flex h-full flex-col justify-between space-y-6">
               <div className="max-w-2xl space-y-2">
-                <h3 className="text-xl text-foreground">Explore our other products</h3>
+                <h2>Explore our other products</h2>
                 <p className="text-base text-foreground-light">
                   Supabase provides all the backend features you need to build a product. You can
                   use it completely, or just the features you need.
@@ -228,7 +226,7 @@ const NewProjectPanel = () => {
       <div className="col-span-12 lg:col-span-4">
         <div className="space-y-6">
           <div className="space-y-2">
-            <h3 className="text-xl text-foreground">Connecting to your new project</h3>
+            <h2>Connecting to your new project</h2>
             <p className="text-base text-foreground-light lg:max-w-sm">
               Interact with your database through the{' '}
               <Link href="https://supabase.com/docs/reference" className="text-brand">

apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx

@@ -91,11 +91,11 @@ export const GraphiQLTab = () => {
       <div className="flex flex-col items-center justify-center flex-1 px-4">
         <div className="w-full max-w-md">
           <div className="mb-6">
-            <h1 className="mt-8 mb-2 text-2xl">Enable the GraphQL Extension</h1>
-            <h2 className="text-sm text-foreground-light">
+            <h1 className="mt-8 mb-2">Enable the GraphQL Extension</h1>
+            <p className="text-sm text-foreground-light">
               Toggle the switch below to enable the GraphQL extension. You can then use the GraphQL
               API with your Supabase Database.
-            </h2>
+            </p>
           </div>
 
           <ExtensionCard extension={pgGraphqlExtension} />

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx

@@ -258,7 +258,7 @@ export default function JWTSecretKeysTable() {
 
           <div className="flex flex-col gap-4">
             <div className="flex flex-col gap-2">
-              <h2 className="text-xl">Previously used keys</h2>
+              <h2>Previously used keys</h2>
               <p className="text-sm text-foreground-lighter">
                 These JWT signing keys are still used to{' '}
                 <em className="text-brand not-italic">verify tokens</em> that are yet to expire.
@@ -326,7 +326,7 @@ export default function JWTSecretKeysTable() {
       {revokedKeys.length > 0 && (
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-2">
-            <h2 className="text-xl">Revoked keys</h2>
+            <h2>Revoked keys</h2>
             <p className="text-sm text-foreground-lighter">
               These keys are no longer used to verify or sign JWTs.
             </p>

apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx

@@ -8,6 +8,7 @@ import { z } from 'zod'
 import { useParams } from 'common'
 import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 
+import { DocsButton } from 'components/ui/DocsButton'
 import {
   Button,
   Form_Shadcn_,
@@ -38,7 +39,6 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { urlRegex } from '../Auth/Auth.constants'
 import { DATADOG_REGIONS, LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
-import { DocsButton } from 'components/ui/DocsButton'
 
 const FORM_ID = 'log-drain-destination-form'
 
@@ -456,7 +456,7 @@ export function LogDrainDestinationSheetForm({
             <>
               <div className="border-t mt-4">
                 <div className="px-content pt-2 pb-3 border-b bg-background-alternative-200">
-                  <h2 className="text-sm text-foreground">Custom Headers</h2>
+                  <h2 className="text-sm">Custom Headers</h2>
                   <p className="text-xs text-foreground-lighter">
                     {getHeadersSectionDescription()}
                   </p>

apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx

@@ -69,7 +69,7 @@ const CreditBalance = () => {
                     <div className="flex items-center space-x-1">
                       {isDebt && <h4 className="opacity-50">-</h4>}
                       <h4 className="opacity-50">$</h4>
-                      <h2 className="text-2xl relative">{balance}</h2>
+                      <h1 className="relative">{balance}</h1>
                       {isCredit && <h4 className="opacity-50">/credits</h4>}
                     </div>
                   </div>

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx

@@ -3,6 +3,10 @@ import Link from 'next/link'
 import { useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
+import { Elements } from '@stripe/react-stripe-js'
+import { loadStripe, PaymentIntentResult, StripeElementsOptions } from '@stripe/stripe-js'
+import { getStripeElementsAppearanceOptions } from 'components/interfaces/Billing/Payment/Payment.utils'
+import { PaymentConfirmation } from 'components/interfaces/Billing/Payment/PaymentConfirmation'
 import {
   billingPartnerLabel,
   getPlanChangeType,
@@ -11,25 +15,19 @@ import AlertError from 'components/ui/AlertError'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { OrganizationBillingSubscriptionPreviewResponse } from 'data/organizations/organization-billing-subscription-preview'
 import { ProjectInfo } from 'data/projects/projects-query'
+import { useConfirmPendingSubscriptionChangeMutation } from 'data/subscriptions/org-subscription-confirm-pending-change'
 import { useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
 import { SubscriptionTier } from 'data/subscriptions/types'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { PRICING_TIER_PRODUCT_IDS, PROJECT_STATUS, STRIPE_PUBLIC_KEY } from 'lib/constants'
 import { formatCurrency } from 'lib/helpers'
+import { useTheme } from 'next-themes'
+import { plans as subscriptionsPlans } from 'shared-data/plans'
 import { Button, Dialog, DialogContent, Table, TableBody, TableCell, TableRow } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
-import PaymentMethodSelection from './PaymentMethodSelection'
-import { useConfirmPendingSubscriptionChangeMutation } from 'data/subscriptions/org-subscription-confirm-pending-change'
-import { PaymentConfirmation } from 'components/interfaces/Billing/Payment/PaymentConfirmation'
-import { Elements } from '@stripe/react-stripe-js'
-import { loadStripe, StripeElementsOptions } from '@stripe/stripe-js'
-import { useTheme } from 'next-themes'
-import { PaymentIntentResult } from '@stripe/stripe-js'
-import { getStripeElementsAppearanceOptions } from 'components/interfaces/Billing/Payment/Payment.utils'
-import { plans as subscriptionsPlans } from 'shared-data/plans'
 import type { PaymentMethodElementRef } from '../PaymentMethods/NewPaymentMethodElement'
-import { useParams } from 'common'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import PaymentMethodSelection from './PaymentMethodSelection'
 
 const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
 
@@ -347,7 +345,7 @@ export const SubscriptionPlanUpdateDialog = ({
                         <span>Monthly invoice estimate</span>
                         <InfoTooltip side="right">
                           <div className="w-[520px] p-6">
-                            <h3 className="text-base font-medium mb-2">Your new monthly invoice</h3>
+                            <h3 className="font-medium mb-2">Your new monthly invoice</h3>
                             <p className="prose text-xs mb-2">
                               Paid projects run 24/7 without pausing. First project uses Compute
                               Credits; additional projects start at <span translate="no">$10</span>
@@ -616,7 +614,7 @@ export const SubscriptionPlanUpdateDialog = ({
 
           {/* Right Column */}
           <div className="bg-surface-100 p-8 flex flex-col border-l xl:col-span-2">
-            <h3 className="text-base mb-8">
+            <h3 className="mb-8">
               {changeType === 'downgrade' ? 'Downgrade' : 'Upgrade'}{' '}
               <span className="font-bold">{selectedOrganization?.name}</span> to{' '}
               {changeType === 'downgrade'

apps/studio/components/interfaces/ProjectAPIDocs/Content/Bucket.tsx

@@ -25,7 +25,7 @@ const Bucket = ({ language, apikey, endpoint }: ContentProps) => {
     <div className="divide-y">
       <div className="space-y-1 px-4 py-4">
         <div className="flex items-center space-x-2">
-          <h2 className="text-xl">{bucket.name}</h2>
+          <h2>{bucket.name}</h2>
           <Badge variant={bucket.public ? 'warning' : 'default'}>
             {bucket.public ? 'Public' : 'Private'}
           </Badge>

apps/studio/components/interfaces/ProjectAPIDocs/Content/EdgeFunction.tsx

@@ -21,7 +21,7 @@ const Bucket = ({ language, apikey = 'API_KEY', endpoint }: ContentProps) => {
     <div className="divide-y">
       <div className="space-y-1 px-4 py-4">
         <div className="flex items-center space-x-2">
-          <h2 className="text-xl">{edgeFunction.name}</h2>
+          <h2>{edgeFunction.name}</h2>
         </div>
       </div>
 

apps/studio/components/interfaces/ProjectAPIDocs/Content/Entity.tsx

@@ -4,11 +4,11 @@ import { useEffect } from 'react'
 import Table from 'components/to-be-cleaned/Table'
 import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
 import { useAppStateSnapshot } from 'state/app-state'
+import LanguageSelector from '../LanguageSelector'
 import { DOCS_RESOURCE_CONTENT } from '../ProjectAPIDocs.constants'
 import ResourceContent from '../ResourceContent'
 import type { ContentProps } from './Content.types'
 import { tempRemovePostgrestText } from './Content.utils'
-import LanguageSelector from '../LanguageSelector'
 
 function getColumnType(type: string, format: string) {
   // json and jsonb both have type=undefined, so check format instead
@@ -57,7 +57,7 @@ const Entity = ({ language, apikey = '', endpoint = '' }: ContentProps) => {
     <div className="divide-y relative">
       <div className="flex items-center justify-between px-4 py-4 sticky top-0 bg-surface-100 z-10 border-b shadow-md">
         <div className="flex flex-col gap-y-1">
-          <h2 className="text-xl">{resource}</h2>
+          <h2>{resource}</h2>
           <p className="text-sm text-foreground-light">
             {definition?.description ?? 'No description available'}
           </p>

apps/studio/components/interfaces/ProjectAPIDocs/Content/RPC.tsx

@@ -57,7 +57,7 @@ export const RPC = ({ language }: ContentProps) => {
   return (
     <div className="divide-y">
       <div className="space-y-1 px-4 py-4">
-        <h2 className="text-xl">{rpc.name}</h2>
+        <h2>{rpc.name}</h2>
         <p className="text-sm text-foreground-light">{summary ?? 'No description available'}</p>
       </div>
       <div className="space-y-2 px-4 py-4">

apps/studio/components/interfaces/Reports/ReportChart.tsx

@@ -110,11 +110,11 @@ const ReportChart = ({
   if (!isAvailable && !isLoading) {
     return (
       <Panel
-        title={<h2 className="text-sm">{chart.label}</h2>}
+        title={<p className="text-sm">{chart.label}</p>}
         className={cn('h-[260px] relative', className)}
       >
         <div className="z-10 flex flex-col items-center justify-center space-y-2 h-full absolute top-0 left-0 w-full bg-surface-100/70 backdrop-blur-md">
-          <h2 className="">{chart.label}</h2>
+          <h2>{chart.label}</h2>
           <p className="text-sm text-foreground-light">
             This chart is available from{' '}
             <span className="capitalize">

apps/studio/components/interfaces/Reports/ReportHeader.tsx

@@ -15,7 +15,7 @@ const ReportHeader = ({ title, showDatabaseSelector }: ReportHeaderProps) => {
 
   return (
     <div className="flex flex-row justify-between gap-4 items-center">
-      <h1 className="text-2xl text-foreground">{title}</h1>
+      <h1>{title}</h1>
       {showDatabaseSelector && (
         <DatabaseSelector
           onSelectId={(db) => {

apps/studio/components/interfaces/Reports/Reports.tsx

@@ -364,7 +364,7 @@ const Reports = () => {
     <div className="flex flex-col space-y-4" style={{ maxHeight: '100%' }}>
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl text-foreground">{currentReport?.name || 'Reports'}</h1>
+          <h1>{currentReport?.name || 'Reports'}</h1>
           <p className="text-foreground-light">{currentReport?.description}</p>
         </div>
         {hasEdits && (

apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationSelector.tsx

@@ -59,7 +59,7 @@ const RoleImpersonationSelector = ({
   return (
     <>
       <div className={cn('flex flex-col gap-3', padded ? 'p-5' : 'pb-5')}>
-        <h2 className="text-foreground text-base">Database role settings</h2>
+        <p className="text-foreground text-base">Database role settings</p>
 
         <form
           onSubmit={(e) => {

apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx

@@ -175,9 +175,9 @@ const UserImpersonationSelector = () => {
   return (
     <>
       <div className="px-5 py-3">
-        <h2 className="text-foreground text-sm">
+        <p className="text-foreground text-sm">
           {displayName ? `Impersonating ${displayName}` : 'Impersonate a User'}
-        </h2>
+        </p>
         <p className="text-sm text-foreground-light">
           {!impersonatingUser && !isExternalAuthImpersonating
             ? "Select a user to respect your database's Row-Level Security policies for that particular user."

apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx

@@ -63,7 +63,7 @@ const SQLQuickstarts = () => {
     <div className="block h-full space-y-8 overflow-y-auto p-6 px-10 bg-dash-sidebar dark:bg-surface-100">
       <div className="mb-8">
         <div className="mb-6">
-          <h1 className="text-foreground mb-1 text-xl">Quickstarts</h1>
+          <h2 className="mb-1">Quickstarts</h2>
           <p className="text-foreground-light text-sm">
             Click on any script to fill the query box, modify the script, then click
             <span className="text-code">Run</span>.

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

@@ -63,7 +63,7 @@ const SQLTemplates = () => {
     <div className="block h-full space-y-8 overflow-y-auto p-6 px-10 bg-dash-sidebar dark:bg-surface-100">
       <div>
         <div className="mb-6">
-          <h1 className="text-foreground mb-1 text-xl">Scripts</h1>
+          <h2 className="mb-1">Scripts</h2>
           <p className="text-foreground-light text-sm">Quick scripts to run on your database.</p>
           <p className="text-foreground-light text-sm">
             Click on any script to fill the query box, modify the script, then click

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx

@@ -124,7 +124,7 @@ const ResetDbPassword = ({ disabled = false }) => {
       </Panel>
       <Modal
         hideFooter
-        header={<h5 className="text-sm text-foreground">Reset database password</h5>}
+        header={<h5 className="text-foreground">Reset database password</h5>}
         confirmText="Reset password"
         size="medium"
         visible={showResetDbPass}