From 77d99e0f042c5fae2ca032bb49b42b4f70c4e17d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Wed, 7 May 2025 23:31:03 +0800
Subject: [PATCH] chore: branching compute hours copy (#35524)

---
 .../platform/manage-your-usage/branching.mdx  |  4 +-
 .../BillingBreakdown/ComputeMetric.tsx        | 40 +++++++++++++------
 .../data/analytics/org-daily-stats-query.ts   |  2 +-
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/apps/docs/content/guides/platform/manage-your-usage/branching.mdx b/apps/docs/content/guides/platform/manage-your-usage/branching.mdx
index 87b57e18bd..59e3b8f381 100644
--- a/apps/docs/content/guides/platform/manage-your-usage/branching.mdx
+++ b/apps/docs/content/guides/platform/manage-your-usage/branching.mdx
@@ -54,10 +54,10 @@ You can view Branching usage on the [organization's usage page](https://supabase
   zoomable
 />
 
-In the Usage Summary section, you can see how many hours your Preview branches existed during the selected time period. Hover over "Branches Compute Hours" for a detailed breakdown.
+In the Usage Summary section, you can see how many hours your Preview branches existed during the selected time period. Hover over "Branching Compute Hours" for a detailed breakdown.
 
 <Image
-  alt="Usage summary Branches Compute Hours"
+  alt="Usage summary Branching Compute Hours"
   src={{
     light: '/docs/img/guides/platform/usage-summary-branch-hours--light.png',
     dark: '/docs/img/guides/platform/usage-summary-branch-hours--dark.png',
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/ComputeMetric.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/ComputeMetric.tsx
index 329c89339f..16f62d8614 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/ComputeMetric.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/ComputeMetric.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 
-import { PricingMetric } from 'data/analytics/org-daily-stats-query'
+import { ComputeUsageMetric, PricingMetric } from 'data/analytics/org-daily-stats-query'
 import type { OrgUsageResponse } from 'data/usage/org-usage-query'
 import { formatCurrency } from 'lib/helpers'
 import { useMemo } from 'react'
@@ -62,18 +62,32 @@ const ComputeMetric = ({ slug, metric, usage, relativeToSubscription }: ComputeM
           </p>
 
           <div className="my-2">
-            <p className="text-sm">
-              Every project is a dedicated server and database. For every hour your project is
-              active, it incurs compute costs based on the compute size of your project. Paused
-              projects do not incur compute costs.{' '}
-              <Link
-                href="https://supabase.com/docs/guides/platform/manage-your-usage/compute"
-                target="_blank"
-                className="transition text-brand hover:text-brand-600 underline"
-              >
-                Read more
-              </Link>
-            </p>
+            {usageMeta?.metric === ComputeUsageMetric.COMPUTE_HOURS_BRANCH ? (
+              <p className="text-sm">
+                Each Preview branch is a separate environment with all Supabase services (Database,
+                Auth, Storage, etc.).{' '}
+                <Link
+                  href="https://supabase.com/docs/guides/platform/manage-your-usage/branching"
+                  target="_blank"
+                  className="transition text-brand hover:text-brand-600 underline"
+                >
+                  Read more
+                </Link>
+              </p>
+            ) : (
+              <p className="text-sm">
+                Every project is a dedicated server and database. For every hour your project is
+                active, it incurs compute costs based on the compute size of your project. Paused
+                projects do not incur compute costs.{' '}
+                <Link
+                  href="https://supabase.com/docs/guides/platform/manage-your-usage/compute"
+                  target="_blank"
+                  className="transition text-brand hover:text-brand-600 underline"
+                >
+                  Read more
+                </Link>
+              </p>
+            )}
           </div>
 
           {usageMeta && sortedProjectAllocations.length > 0 && (
diff --git a/apps/studio/data/analytics/org-daily-stats-query.ts b/apps/studio/data/analytics/org-daily-stats-query.ts
index ee5788aa35..56e50f998e 100644
--- a/apps/studio/data/analytics/org-daily-stats-query.ts
+++ b/apps/studio/data/analytics/org-daily-stats-query.ts
@@ -69,7 +69,7 @@ export enum ComputeUsageMetric {
 export const computeUsageMetricLabel = (computeUsageMetric: ComputeUsageMetric) => {
   switch (computeUsageMetric) {
     case 'COMPUTE_HOURS_BRANCH':
-      return 'Branches'
+      return 'Branching'
     case 'COMPUTE_HOURS_XS':
       return 'Micro'
     case 'COMPUTE_HOURS_SM':