mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
## Context PR mainly adds a change to allow users to dismiss an incident banner Am also taking this time to consolidate `IncidentBanner` and `MaintenanceBanner` into a single component `StatusPageBanner` so that the logic for rendering either component is more clearer. ## Intended behaviour (should be covered by e2e tests) - Incident banner shows if there are incidents with impact !== 'none' - Incident banner still takes precedence over Maintanence banner (if there's both incident + maintenence events) - Dismissing the incident banner will subsequently show the maintenance banner if the maintenance hasn't been dismissed before (just to make sure that the user doesn't miss any comms) - Incident banner will not be dismissible if there's an override (via feature flag or env var) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Unified status page banner showing incident or maintenance notifications, with dismissible banners that persist across sessions; incident notices take precedence over maintenance. * **Refactor** * Replaced separate incident and maintenance banners with a single consolidated StatusPageBanner component. * **Tests** * Added end-to-end tests covering banner visibility, precedence, and dismissal behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import type { IncidentInfo } from 'lib/api/incident-status'
|
|
import { BASE_PATH, IS_PLATFORM, IS_TEST_ENV } from 'lib/constants'
|
|
import { partition } from 'lodash'
|
|
import { UseCustomQueryOptions } from 'types'
|
|
|
|
import { platformKeys } from './keys'
|
|
|
|
export async function getIncidentStatus(
|
|
signal?: AbortSignal
|
|
): Promise<{ maintenanceEvents: IncidentInfo[]; incidents: IncidentInfo[] }> {
|
|
const response = await fetch(`${BASE_PATH}/api/incident-status`, {
|
|
signal,
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text()
|
|
console.error('[getIncidentStatus] Failed:', response.status, errorText)
|
|
throw new Error(`Failed to fetch incident status: ${response.statusText}`)
|
|
}
|
|
|
|
const data = await response.json()
|
|
const [maintenanceEvents, incidents] = partition(
|
|
data ?? [],
|
|
(event) => event.impact === 'maintenance'
|
|
)
|
|
return { maintenanceEvents, incidents }
|
|
}
|
|
|
|
export type IncidentStatusData = Awaited<ReturnType<typeof getIncidentStatus>>
|
|
export type IncidentStatusError = unknown
|
|
|
|
export const useIncidentStatusQuery = <TData = IncidentStatusData>(
|
|
options: UseCustomQueryOptions<IncidentStatusData, IncidentStatusError, TData> = {}
|
|
) =>
|
|
useQuery<IncidentStatusData, IncidentStatusError, TData>({
|
|
queryKey: platformKeys.incidentStatus(),
|
|
queryFn: ({ signal }) => getIncidentStatus(signal),
|
|
staleTime: 1000 * 60 * 5, // 5 minutes to match API cache
|
|
...options,
|
|
// Enable in platform mode, or in test environment for E2E testing
|
|
enabled: (IS_PLATFORM || IS_TEST_ENV) && (options.enabled ?? true),
|
|
})
|