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

Code before:
          return `We are aware of multiple ongoing issues and are investigating. ${statusDescriptionSignOff}`
        }
        return `We are investigating ${issueTerm}. ${statusDescriptionSignOff}`

      case 'identified':
        if (hasMultipleIncidents && !allSameStatus) {
          return `We have identified the cause of some of ${isPlural ? 'these issues' : 'this issue'} and are working on fixes. ${statusDescriptionSignOff}`
        }
        return `We have identified the cause of ${issueTerm} and are working on a fix. ${statusDescriptionSignOff}`

      case 'monitoring':
        if (hasMultipleIncidents && !allSameStatus) {
          return `Fixes have been deployed for some of ${isPlural ? 'these issues' : 'this issue'} and we are monitoring the results. ${statusDescriptionSignOff}`
        }
        return `A fix has been deployed and we are monitoring the results. ${statusDescriptionSignOff}`

      case 'resolved':
        if (hasMultipleIncidents && !allSameStatus) {
          return `Some of ${isPlural ? 'these issues' : 'this issue'} have been resolved, but others may still be ongoing. ${statusDescriptionSignOff}`
        }
        return `${issuesTerm} ${isPlural ? 'have' : 'has'} been resolved but may take some time to fully recover. ${statusDescriptionSignOff}`

      default:
        return `We are investigating ${issueTerm}. ${statusDescriptionSignOff}`
    }
  }

  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)}
            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):
See also the status ranking in `incident-status-utils.ts`. There are some design decisions here that should be checked:

- What each status means in plain English
- Which are more important than others

Code after:
      }
      return `${capitalizeFirstLetter(issueTerm)} ${isPlural ? 'have' : 'has'} been resolved but may take some time to fully recover. ${STATUS_DESCRIPTION_SIGN_OFF}`

    default:
      return `We are investigating ${issueTerm}. ${STATUS_DESCRIPTION_SIGN_OFF}`
  }
}

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