Chore/link to usage (supabase#36404)

* Add link to usage page

* Add usage button

Author: saltcod

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

@@ -7,11 +7,15 @@ import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
 import { CriticalIcon, WarningIcon } from 'ui'
 import { PricingMetric } from 'data/analytics/org-daily-stats-query'
+import { usePathname } from 'next/navigation'
 
 export const Restriction = () => {
   const org = useSelectedOrganization()
   const { data: usage, isSuccess: isSuccessOrgUsage } = useOrgUsageQuery({ orgSlug: org?.slug })
 
+  const pathname = usePathname()
+  const isUsagePage = pathname?.endsWith('/usage')
+
   const hasExceededAnyLimits = Boolean(
     usage?.usages.find(
       (metric) =>
@@ -69,6 +73,11 @@ export const Restriction = () => {
                   {org.plan.id === 'free' ? 'Upgrade plan' : 'Change spend cap'}
                 </Link>
               </Button>
+              {!isUsagePage && (
+                <Button key="view-usage-button" asChild type="default">
+                  <Link href={`/org/${org?.slug}/usage`}>View usage</Link>
+                </Button>
+              )}
               <Button asChild type="default" icon={<ExternalLink />}>
                 <a href="https://supabase.com/docs/guides/platform/cost-control#spend-cap">
                   About spend cap
@@ -106,6 +115,13 @@ export const Restriction = () => {
                   {org.plan.id === 'free' ? 'Upgrade plan' : 'Disable spend cap'}
                 </Link>
               </Button>
+
+              {!isUsagePage && (
+                <Button key="view-usage-button" asChild type="default">
+                  <Link href={`/org/${org?.slug}/usage`}>View usage</Link>
+                </Button>
+              )}
+
               <Button asChild type="default" icon={<ExternalLink />}>
                 <a href="https://supabase.com/docs/guides/platform/billing-faq#fair-use-policy">
                   About Fair Use Policy
@@ -141,6 +157,11 @@ export const Restriction = () => {
                   {org.plan.id === 'free' ? 'Upgrade plan' : 'Disable spend cap'}
                 </Link>
               </Button>
+              {!isUsagePage && (
+                <Button key="view-usage-button" asChild type="default">
+                  <Link href={`/org/${org?.slug}/usage`}>View usage</Link>
+                </Button>
+              )}
               <Button asChild type="default" icon={<ExternalLink />}>
                 <a href="https://supabase.com/docs/guides/platform/billing-faq#fair-use-policy">
                   About Fair Use Policy
@@ -177,6 +198,11 @@ export const Restriction = () => {
                   {org.plan.id === 'free' ? 'Upgrade plan' : 'Disable spend cap'}
                 </Link>
               </Button>
+              {!isUsagePage && (
+                <Button key="view-usage-button" asChild type="default">
+                  <Link href={`/org/${org?.slug}/usage`}>View usage</Link>
+                </Button>
+              )}
               <Button asChild type="default" icon={<ExternalLink />}>
                 <a href="https://supabase.com/docs/guides/platform/billing-faq#fair-use-policy">
                   About Fair Use Policy