mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
## What kind of change does this PR introduce? Refactor. Follow-up to #49871. ## What is the current behavior? Branded (green) text still uses the `text-brand` classname while the colour comes from `--primary`. ## What is the new behavior? **Rename-only:** `text-brand` → `text-primary` across callsites and docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No intentional colour changes in this PR. This better matches how we treat our green in other components and props, like `variant="primary"` for green buttons. ## To test On light mode: smoke-test that branded text still looks like #49871 (readable green, not the bright fill). - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/): “Scale to millions” uses `text-primary` - [Docs homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs): branded links like “More on self-hosting” are still readable - [Typography docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography): documents `text-primary` - [Colour usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage): `text-primary` is visibly darker than `bg-brand-default` _on light mode_ - [Studio auth providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright green <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated branded text, link hover states, icons, badges, indicators, and highlighted content across the Design System, Docs, Studio, Learn, UI Library, and marketing experiences to use the primary theme color. * Updated syntax highlighting and table-of-contents styling for consistent primary-color presentation. * Refined brand color fallback behavior for bright fills and borders. * **Documentation** * Updated color-usage and typography guidance to recommend the primary text utility. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import {
|
|
RawAuthMetricsResponseSchema,
|
|
type RawAuthMetricsResponse,
|
|
type RawAuthMetricsRow,
|
|
} from './OverviewUsage.schema'
|
|
import { get } from '@/data/fetchers'
|
|
|
|
export type AuthMetricsResponse = RawAuthMetricsResponse
|
|
|
|
export type MetricName =
|
|
| 'activeUsers'
|
|
| 'signUpCount'
|
|
| 'apiTotalRequests'
|
|
| 'apiErrorRequests'
|
|
| 'authTotalRequests'
|
|
| 'authTotalErrors'
|
|
| 'passwordResetRequests'
|
|
|
|
type NumericMetricKey = keyof Omit<RawAuthMetricsRow, 'period'>
|
|
|
|
const metricKeyMap: Record<MetricName, NumericMetricKey> = {
|
|
activeUsers: 'active_users',
|
|
signUpCount: 'sign_up_count',
|
|
apiTotalRequests: 'api_total_requests',
|
|
apiErrorRequests: 'api_error_requests',
|
|
authTotalRequests: 'auth_total_requests',
|
|
authTotalErrors: 'auth_total_errors',
|
|
passwordResetRequests: 'password_reset_requests',
|
|
}
|
|
|
|
export const fetchAllAuthMetrics = async (projectRef: string): Promise<RawAuthMetricsResponse> => {
|
|
const { data, error } = await get(
|
|
`/platform/projects/{ref}/analytics/endpoints/auth.metrics` as any,
|
|
{
|
|
params: {
|
|
path: { ref: projectRef },
|
|
query: {
|
|
interval: '1day',
|
|
},
|
|
},
|
|
}
|
|
)
|
|
if (error) throw error
|
|
|
|
const parsed = RawAuthMetricsResponseSchema.safeParse(data)
|
|
if (!parsed.success) {
|
|
const first = parsed.error.issues[0]
|
|
throw new Error(`Invalid auth metrics response: ${first?.message ?? 'Invalid shape'}`)
|
|
}
|
|
return parsed.data
|
|
}
|
|
|
|
export const getMetricValues = (
|
|
metrics: AuthMetricsResponse | undefined,
|
|
metricName: MetricName
|
|
) => {
|
|
const key = metricKeyMap[metricName]
|
|
const currentRow = metrics?.result.find((r) => r.period === 'current')
|
|
const previousRow = metrics?.result.find((r) => r.period === 'previous')
|
|
return {
|
|
current: currentRow ? currentRow[key] : 0,
|
|
previous: previousRow ? previousRow[key] : 0,
|
|
}
|
|
}
|
|
|
|
export const getApiSuccessRates = (metrics: AuthMetricsResponse | undefined) => {
|
|
const { current: apiTotalCurrent, previous: apiTotalPrevious } = getMetricValues(
|
|
metrics,
|
|
'apiTotalRequests'
|
|
)
|
|
const { current: apiErrorCurrent, previous: apiErrorPrevious } = getMetricValues(
|
|
metrics,
|
|
'apiErrorRequests'
|
|
)
|
|
const current =
|
|
apiTotalCurrent > 0 ? Math.max(0, 100 - (apiErrorCurrent / apiTotalCurrent) * 100) : null
|
|
const previous =
|
|
apiTotalPrevious > 0 ? Math.max(0, 100 - (apiErrorPrevious / apiTotalPrevious) * 100) : null
|
|
return { current, previous }
|
|
}
|
|
|
|
export const getAuthSuccessRates = (metrics: AuthMetricsResponse | undefined) => {
|
|
const { current: authTotalRequestsCurrent, previous: authTotalRequestsPrevious } =
|
|
getMetricValues(metrics, 'authTotalRequests')
|
|
const { current: authTotalErrorsCurrent, previous: authTotalErrorsPrevious } = getMetricValues(
|
|
metrics,
|
|
'authTotalErrors'
|
|
)
|
|
const current =
|
|
authTotalRequestsCurrent > 0
|
|
? Math.max(0, 100 - (authTotalErrorsCurrent / authTotalRequestsCurrent) * 100)
|
|
: null
|
|
const previous =
|
|
authTotalRequestsPrevious > 0
|
|
? Math.max(0, 100 - (authTotalErrorsPrevious / authTotalRequestsPrevious) * 100)
|
|
: null
|
|
return { current, previous }
|
|
}
|
|
|
|
export const calculatePercentageChange = (current: number, previous: number): number | null => {
|
|
if (previous === 0) return null
|
|
return ((current - previous) / previous) * 100
|
|
}
|
|
|
|
export const calculatePercentagePointChange = (
|
|
current: number | null,
|
|
previous: number | null
|
|
): number | null => {
|
|
if (current === null || previous === null) return null
|
|
return current - previous
|
|
}
|
|
|
|
export const getChangeColor = (percentageChange: number): string => {
|
|
return percentageChange >= 0 ? 'text-primary' : 'text-destructive'
|
|
}
|