mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
CharisandJoshen Lim
277441334f
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature ## What is the current behavior? Region-specific incidents are only shown in the global StatusPageBanner, which doesn't clearly indicate that an incident only affects specific regions during project creation. ## What is the new behavior? Region-specific incidents are now displayed inline in the RegionSelector with smart region matching to show which regions are affected. The StatusPageBanner logic is updated to avoid duplicate incident notices for region-specific incidents when creating projects. ## Additional context <img width="1394" height="650" alt="CleanShot 2026-03-02 at 16 32 34@2x" src="https://github.com/user-attachments/assets/fd3734dc-8049-4c24-82d8-456bfbdbd4fd" /> Resolves FE-2652 --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import type { IncidentCache } from 'lib/api/incident-status'
|
|
|
|
type BannerIncident = { id: string; cache?: IncidentCache | null }
|
|
|
|
/**
|
|
* Determines whether the incident status banner should be shown to a given user,
|
|
* given all active incidents and the user's project state.
|
|
*
|
|
* Returns true if any incident matches the user's context.
|
|
*
|
|
* @param incidents - Active incidents from the incident-status endpoint
|
|
* @param hasProjects - Whether the user has any projects at all
|
|
* @param userRegions - Deduplicated set of regions of all databases (primary and read replicas) owned by the user
|
|
* @param hasUnknownRegions - True when region data is incomplete (org has >100 projects).
|
|
* When true, the region check is skipped and a match is assumed.
|
|
*/
|
|
export function shouldShowBanner({
|
|
incidents,
|
|
hasProjects,
|
|
userRegions,
|
|
hasUnknownRegions = false,
|
|
}: {
|
|
incidents: Array<BannerIncident>
|
|
hasProjects: boolean
|
|
userRegions: Set<string>
|
|
hasUnknownRegions?: boolean
|
|
}): boolean {
|
|
return incidents.some((incident) => {
|
|
const affectedRegions = incident.cache?.affected_regions ?? []
|
|
const affectsProjectCreation = incident.cache?.affects_project_creation ?? false
|
|
|
|
// Users with no projects only see the banner if the incident affects project creation
|
|
// and has no specific region targeting (inline notice in RegionSelector handles region-specific incidents)
|
|
if (!hasProjects) return affectsProjectCreation && affectedRegions.length === 0
|
|
|
|
// User has projects: if no region restriction, always show
|
|
if (affectedRegions.length === 0) return true
|
|
|
|
// Region data is incomplete — assume the user has a database in an affected region
|
|
if (hasUnknownRegions) return true
|
|
|
|
// Region restriction: only show if the user has a database in an affected region
|
|
return affectedRegions.some((region) => userRegions.has(region))
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Returns the IDs of incidents that are relevant to the given user.
|
|
*
|
|
* An incident is considered relevant if it would trigger banner visibility for
|
|
* the user, per the same logic as shouldShowBanner.
|
|
*/
|
|
export function getRelevantIncidentIds({
|
|
incidents,
|
|
hasProjects,
|
|
userRegions,
|
|
hasUnknownRegions = false,
|
|
}: {
|
|
incidents: Array<BannerIncident>
|
|
hasProjects: boolean
|
|
userRegions: Set<string>
|
|
hasUnknownRegions?: boolean
|
|
}): Array<string> {
|
|
return incidents
|
|
.filter((incident) =>
|
|
shouldShowBanner({ incidents: [incident], hasProjects, userRegions, hasUnknownRegions })
|
|
)
|
|
.map((incident) => incident.id)
|
|
}
|