mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Danny White
9d5422a0c9
## What kind of change does this PR introduce?
UI improvement
## What is the current behavior?
We show a non-dismissable, scary, _We are investigating a technical
issue_ banner to all users for very low priority things, like a
telecom-specific outage for users in Yemen. These `"impact": "none"`
events should not trigger the banner.
## What is the new behavior?
These `"impact": "none"` events no longer trigger the banner.
They _do_ still however show up in the support form and inform the AI
Assistant, so users can self-debug if relevant.
## To test
Override your `incident-status` response with the following:
```json
[{
"id": "79kw380212jb",
"name": "Regional network issues in Yemen",
"status": "identified",
"impact": "none",
"active_since": "2026-02-03T21:38:44Z"
}]
```
No banner should show. But the support form and AI Assistant should
still show their respective awareness of the Yemen outage.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Enhanced incident notification system to improve accuracy and reduce
alert fatigue. Incident banners will now only display for incidents with
meaningful impact, filtering out inconsequential incidents from the
notification feed. This change provides users with clearer visibility
into issues that actually affect the platform.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
import { useFlag } from 'common'
|
|
import { ClockSkewBanner } from 'components/layouts/AppLayout/ClockSkewBanner'
|
|
import { IncidentBanner } from 'components/layouts/AppLayout/IncidentBanner'
|
|
import { NoticeBanner } from 'components/layouts/AppLayout/NoticeBanner'
|
|
import { PropsWithChildren } from 'react'
|
|
|
|
import { OrganizationResourceBanner } from '../Organization/HeaderBanner'
|
|
import { MaintenanceBanner } from '@/components/layouts/AppLayout/MaintenanceBanner'
|
|
import { useIncidentStatusQuery } from '@/data/platform/incident-status-query'
|
|
|
|
export const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
|
|
const { data: allStatusPageEvents } = useIncidentStatusQuery()
|
|
const { maintenanceEvents = [], incidents = [] } = allStatusPageEvents ?? {}
|
|
|
|
// Only show incident banner for incidents with real impact (not "none")
|
|
const hasBannerWorthyIncidents = incidents.some((incident) => incident.impact !== 'none')
|
|
const ongoingIncident =
|
|
useFlag('ongoingIncident') ||
|
|
process.env.NEXT_PUBLIC_ONGOING_INCIDENT === 'true' ||
|
|
hasBannerWorthyIncidents
|
|
const ongoingMaintenance = maintenanceEvents.length > 0
|
|
|
|
const showNoticeBanner = useFlag('showNoticeBanner')
|
|
const clockSkewBanner = useFlag('clockSkewBanner')
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<div className="flex-shrink-0">
|
|
{ongoingIncident ? <IncidentBanner /> : ongoingMaintenance ? <MaintenanceBanner /> : null}
|
|
{showNoticeBanner && <NoticeBanner />}
|
|
<OrganizationResourceBanner />
|
|
{clockSkewBanner && <ClockSkewBanner />}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|