Repository: supabase/supabase
File: apps/studio/components/interfaces/Support/IncidentAdmonition.tsx (TypeScript)

Code before:
export function IncidentAdmonition({ isActive }: IncidentAdmonitionProps) {
  const { data: incidents, isLoading, isError } = useIncidentStatusQuery()

  // Don't render anything while loading, on error, or if no incidents
  if (isLoading || isError || !incidents || incidents.length === 0) {
    return null
  }

  const hasMultipleIncidents = incidents.length > 1
  const mostRecentIncident = getMostRecentIncident(incidents)
  const overallStatus = getOverallStatus(incidents)
  const allSameStatus = allIncidentsHaveSameStatus(incidents)

  // Show most recent incident name + count if multiple incidents
  const statusTitle =
    (mostRecentIncident?.name ?? '') +
    (hasMultipleIncidents && incidents
      ? ` and ${incidents.length - 1} other issue${incidents.length > 2 ? 's' : ''}`
      : '')

  return (
    <AnimatePresence>
      {isActive && (
        <motion.aside
          role="alert"
          aria-live="polite"
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: 'auto', opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
        >
          <Admonition
            type="warning"
            layout="horizontal"
            title={statusTitle}
            description={getStatusDescription(overallStatus, hasMultipleIncidents, allSameStatus)}
            actions={
              <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
                <Link href="https://status.supabase.com/" target="_blank" rel="noreferrer">
                  Status page
                </Link>
              </Button>
            }
          />
        </motion.aside>
      )}
    </AnimatePresence>
  )
}


Review comment (suggestion):
The Admonition is already `alert` -- I think that might be a bit too aggressive, automatically reading all admonitions is an annoying experience, but let's address that in another PR

Code after:
  if (isLoading || isError || !incidents || incidents.length === 0) {
    return null
  }

  const { hasMultipleIncidents, mostCriticalIncident, overallStatus, allSameStatus } =
    processIncidentData(incidents)

  // Show most recent incident name + count if multiple incidents
  const statusTitle =
    (mostCriticalIncident?.name ?? '') +
    (hasMultipleIncidents
      ? ` and ${incidents.length - 1} other issue${incidents.length > 2 ? 's' : ''}`
      : '')

  return (
    <AnimatePresence>
      {isActive && (
        <motion.aside
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: 'auto', opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
        >
          <Admonition
            type="warning"
            layout="horizontal"
            title={statusTitle}
            description={getStatusDescription(overallStatus, hasMultipleIncidents, allSameStatus)}
            actions={
              <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
                <Link href="https://status.supabase.com/" target="_blank" rel="noreferrer">
                  Status page
                </Link>
              </Button>
            }
          />
        </motion.aside>
      )}
    </AnimatePresence>
  )
}