Files
supabase/apps/studio/data/platform/incident-status-query.ts
Joshen Lim 839b367375 chore(studio): Consolidate incident banner + maintenance banner, make incident banner dismissible (#42551)
## 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 -->
2026-02-09 17:33:02 +08:00

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),
})