Files
Gildas Garcia 86a3f8b03d chore: upgrade to react-19 (#45886)
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Upgraded workspace to React 19.

* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.

* **Chores**
  * Bumped vaul dependency versions.

* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 16:04:41 +02:00

97 lines
2.7 KiB
TypeScript

import { PricingMetric } from '@/data/analytics/org-daily-stats-query'
const pricingMetricBytes = [
PricingMetric.DATABASE_SIZE,
PricingMetric.EGRESS,
PricingMetric.CACHED_EGRESS,
PricingMetric.STORAGE_SIZE,
]
const pricingMetricNotHrs = [
PricingMetric.FUNCTION_INVOCATIONS,
PricingMetric.LOG_DRAIN_EVENTS,
PricingMetric.MONTHLY_ACTIVE_USERS,
PricingMetric.MONTHLY_ACTIVE_SSO_USERS,
PricingMetric.MONTHLY_ACTIVE_THIRD_PARTY_USERS,
PricingMetric.REALTIME_MESSAGE_COUNT,
PricingMetric.REALTIME_PEAK_CONNECTIONS,
PricingMetric.STORAGE_IMAGES_TRANSFORMED,
]
export const formatUsage = (
pricingMetric: PricingMetric,
allocation: { usage: number; hours?: number }
) => {
if (pricingMetricBytes.includes(pricingMetric)) {
const formattedUsage = +(allocation.usage / 1e9).toFixed(2).toLocaleString()
// To avoid very low usage displaying as "0", we will show "<0.01" instead
if (allocation.usage > 0 && formattedUsage === 0) {
return '<0.01'
} else {
return formattedUsage
}
}
if (allocation.hours && !pricingMetricNotHrs.includes(pricingMetric)) {
return (
allocation.usage.toLocaleString() +
' (' +
Math.round(allocation.usage / allocation.hours).toLocaleString() +
'x' +
allocation.hours.toLocaleString() +
' hours)'
)
} else {
return allocation.usage.toLocaleString()
}
}
export const billingMetricUnit = (pricingMetric: PricingMetric) => {
if (pricingMetricBytes.includes(pricingMetric)) {
return 'GB'
} else if (
pricingMetric.startsWith('COMPUTE_HOURS') ||
[
PricingMetric.CUSTOM_DOMAIN,
PricingMetric.IPV4,
PricingMetric.PITR_7,
PricingMetric.PITR_14,
PricingMetric.PITR_28,
PricingMetric.LOG_DRAIN,
PricingMetric.AUTH_MFA_PHONE,
PricingMetric.AUTH_MFA_WEB_AUTHN,
].includes(pricingMetric)
) {
return 'Hours'
} else {
return null
}
}
export const generateUpgradeReasons = (originalPlan?: string | null, upgradedPlan?: string) => {
const reasons = [
'Current plan limits are not enough for me',
'I want better customer support from Supabase',
'I am migrating from a previous project',
]
if (originalPlan === undefined || upgradedPlan === undefined) {
reasons.push('None of the above')
return reasons
}
if (originalPlan === 'free' && upgradedPlan === 'pro') {
reasons.push('Need more compute')
reasons.push(
'I want access to additional features like branching, daily backups, custom domain and PITR'
)
} else if (upgradedPlan === 'team') {
reasons.push('I want access to SOC2 and HIPAA compliance')
}
reasons.push('None of the above')
return reasons
}