[pull] master from supabase:master

apps/design-system/content/docs/ui-patterns/layout.mdx

@@ -75,6 +75,6 @@ Detail pages display dense or lengthy content split into multiple sections. The
 
 ## Components
 
-- **[PageContainer](/docs/fragments/page-container)** - Container component providing consistent max-width and padding based on size variants
-- **[PageHeader](/docs/fragments/page-header)** - Compound component for building page headers with breadcrumbs, icons, titles, descriptions, actions, and navigation
-- **[PageSection](/docs/fragments/page-section)** - Compound component for organizing page content into distinct sections with title, description, and action areas
+- **[Page Container](../fragments/page-container)**: Container component providing consistent max-width and padding based on size variants
+- **[Page Header](../fragments/page-header)**: Compound component for building page headers with breadcrumbs, icons, titles, descriptions, actions, and navigation
+- **[Page Section](../fragments/page-section)**: Compound component for organizing page content into distinct sections with title, description, and action areas

apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/useCheckEligibilityDeployReplica.ts

@@ -8,6 +8,7 @@ import {
   useReadReplicasQuery,
 } from 'data/read-replicas/replicas-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
+import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useIsAwsK8sCloudProvider, useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 
@@ -16,8 +17,7 @@ export const useCheckEligibilityDeployReplica = () => {
   const isAwsK8s = useIsAwsK8sCloudProvider()
   const { data: project } = useSelectedProjectQuery()
   const { data: org } = useSelectedOrganizationQuery()
-
-  const isFreePlan = org?.plan.id === 'free'
+  const { hasAccess: hasReadReplicaAccess } = useCheckEntitlements('instances.read_replicas')
   const isAWSProvider = project?.cloud_provider === 'AWS'
   const isWalgEnabled = project?.is_physical_backups_enabled
   const isNotOnHigherPlan = useMemo(
@@ -60,7 +60,7 @@ export const useCheckEligibilityDeployReplica = () => {
     !isReachedMaxReplicas &&
     currentPgVersion >= 15 &&
     isAWSProvider &&
-    !isFreePlan &&
+    hasReadReplicaAccess &&
     isWalgEnabled &&
     currentComputeAddon !== undefined &&
     !hasOverdueInvoices &&

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx

@@ -26,6 +26,7 @@ import {
   useReadReplicasQuery,
 } from 'data/read-replicas/replicas-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
+import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useIsAwsK8sCloudProvider, useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { AWS_REGIONS_DEFAULT, BASE_PATH, DOCS_URL } from 'lib/constants'
@@ -71,6 +72,7 @@ const DeployNewReplicaPanel = ({
   const { ref: projectRef } = useParams()
   const { data: project } = useSelectedProjectQuery()
   const { data: org } = useSelectedOrganizationQuery()
+  const { hasAccess: hasReadReplicaAccess } = useCheckEntitlements('instances.read_replicas')
 
   const { data } = useReadReplicasQuery({ projectRef })
   const { data: addons, isSuccess } = useProjectAddonsQuery({ projectRef })
@@ -171,7 +173,6 @@ const DeployNewReplicaPanel = ({
     : MAX_REPLICAS_ABOVE_XL
   const reachedMaxReplicas =
     (data ?? []).filter((db) => db.identifier !== projectRef).length >= maxNumberOfReplicas
-  const isFreePlan = org?.plan.id === 'free'
   const isAWSProvider = project?.cloud_provider === 'AWS'
   const isWalgEnabled = project?.is_physical_backups_enabled
   const currentComputeAddon = addons?.selected_addons.find(
@@ -185,7 +186,7 @@ const DeployNewReplicaPanel = ({
     !reachedMaxReplicas &&
     currentPgVersion >= 15 &&
     isAWSProvider &&
-    !isFreePlan &&
+    hasReadReplicaAccess &&
     isWalgEnabled &&
     currentComputeAddon !== undefined &&
     !hasOverdueInvoices &&
@@ -321,12 +322,12 @@ const DeployNewReplicaPanel = ({
                 <Button asChild type="default">
                   <Link
                     href={
-                      isFreePlan
-                        ? `/org/${org?.slug}/billing?panel=subscriptionPlan&source=deployNewReplicaPanelSmallCompute`
-                        : `/project/${projectRef}/settings/compute-and-disk`
+                      hasReadReplicaAccess
+                        ? `/project/${projectRef}/settings/compute-and-disk`
+                        : `/org/${org?.slug}/billing?panel=subscriptionPlan&source=deployNewReplicaPanelSmallCompute`
                     }
                   >
-                    {isFreePlan ? 'Upgrade to Pro' : 'Change compute size'}
+                    {hasReadReplicaAccess ? 'Change compute size' : 'Upgrade to Pro'}
                   </Link>
                 </Button>
                 <DocsButton
@@ -418,9 +419,9 @@ const DeployNewReplicaPanel = ({
                     <Button asChild type="default">
                       <Link
                         href={
-                          isFreePlan
-                            ? `/org/${org?.slug}/billing?panel=subscriptionPlan&source=deployNewReplicaPanelMaxReplicas`
-                            : `/project/${projectRef}/settings/compute-and-disk`
+                          hasReadReplicaAccess
+                            ? `/project/${projectRef}/settings/compute-and-disk`
+                            : `/org/${org?.slug}/billing?panel=subscriptionPlan&source=deployNewReplicaPanelMaxReplicas`
                         }
                       >
                         Upgrade compute size

apps/studio/csp.js

@@ -113,7 +113,12 @@ module.exports.getCSP = function getCSP() {
     STAPE_URL,
     POSTHOG_URL,
   ]
-  const FRAME_SRC_URLS = [HCAPTCHA_ASSET_URL, STRIPE_JS_URL, STAPE_URL]
+  const FRAME_SRC_URLS = [
+    HCAPTCHA_ASSET_URL,
+    STRIPE_JS_URL,
+    STAPE_URL,
+    ...(isDevOrStaging ? [POSTHOG_URL] : []),
+  ]
   const IMG_SRC_URLS = [
     SUPABASE_URL,
     SUPABASE_COM_URL,

apps/studio/data/usage/constants.ts

@@ -1,6 +1,7 @@
 export const VIOLATION_TYPE_LABELS: Record<string, string> = {
   exceed_db_size_quota: 'DB Size Exceeded',
   exceed_egress_quota: 'Egress Exceeded',
+  exceed_cached_egress_quota: 'Cached Egress Exceeded',
   exceed_edge_functions_count_quota: 'Edge Functions Count Exceeded',
   exceed_edge_functions_invocations_quota: 'Edge Functions Invocations Exceeded',
   exceed_monthly_active_users_quota: 'Monthly Active Users Exceeded',

apps/studio/pages/new/[slug].tsx

@@ -452,11 +452,11 @@ const Wizard: NextPageWithLayout = () => {
                         title="Need a free project?"
                         description={
                           <p>
-                            Supabase billing is organization-based. Get 2 free projects by{' '}
+                            You can have up to 2 free projects across all organizations.{' '}
                             <Link className="underline text-foreground" href="/new">
-                              creating a free organization
-                            </Link>
-                            .
+                              Create a free organization
+                            </Link>{' '}
+                            to use them.
                           </p>
                         }
                       />

packages/ui-patterns/src/PageSection/index.tsx

@@ -66,7 +66,12 @@ const PageSectionSummary = ({ className, children, ...props }: PageSectionSummar
   return (
     <div
       data-slot="page-section-summary"
-      className={cn('flex flex-col gap-1', className)}
+      className={cn(
+        'flex flex-col gap-1',
+        // Center alignment with PageSection Aside in case no PageSectionDescription present
+        '@xl:self-center',
+        className
+      )}
       {...props}
     >
       {children}
@@ -109,6 +114,13 @@ const PageSectionDescription = ({ className, children, ...props }: PageSectionDe
     <div
       data-slot="page-section-description"
       className={cn('text-sm text-foreground-light', className)}
+      // Optically align with bottom of PageSectionAside
+      // trim-end is not available in Tailwind CSS
+      style={
+        {
+          textBoxTrim: 'trim-end',
+        } as React.CSSProperties
+      }
       {...props}
     >
       {children}
@@ -132,7 +144,12 @@ const PageSectionAside = ({ className, ...props }: PageSectionAsideProps) => {
   return (
     <div
       data-slot="page-section-aside"
-      className={cn('flex items-center gap-2', className)}
+      className={cn(
+        'flex items-center gap-2',
+        // Align with bottom of PageSectionDescription
+        '@xl:self-end',
+        className
+      )}
       {...props}
     />
   )