Make Incident Banner (#1365)

* Make Incident Banner

* Export Severity type

* Add status from status page

* Remove unnecessary condition

ui/apps/dashboard/src/app/(organization-active)/IncidentBanner.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Link } from '@inngest/components/Link';
+
+import { Banner, type Severity } from '@/components/Banner';
+import { useBooleanFlag } from '@/components/FeatureFlags/hooks';
+import { useSystemStatus } from './support/statusPage';
+
+export default function IncidentBanner() {
+  const isIncidentBannerEnabled = useBooleanFlag('incident-banner');
+  const status = useSystemStatus();
+
+  if (!isIncidentBannerEnabled.value && status.indicator === 'none') return;
+
+  let message = '';
+  let severity: Severity = 'warning';
+
+  if (isIncidentBannerEnabled.value) {
+    message = ' We are experiencing some issues.';
+  } else {
+    message = `${status.description}`;
+    if (status.indicator === 'minor') {
+      severity = 'info';
+    }
+  }
+
+  return (
+    <Banner kind={severity}>
+      {message} Please check the{' '}
+      <span style={{ display: 'inline-flex' }}>
+        <Link href="https://status.inngest.com/">status page.</Link>
+      </span>
+    </Banner>
+  );
+}

ui/apps/dashboard/src/app/(organization-active)/layout.tsx

@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react';
-import { Link } from '@inngest/components/Link';
 
-import { Banner } from '@/components/Banner';
 import { URQLProvider } from '@/queries/URQLProvider';
+import IncidentBanner from './IncidentBanner';
 
 type OrganizationActiveLayoutProps = {
   children: ReactNode;
@@ -11,12 +10,7 @@ type OrganizationActiveLayoutProps = {
 export default function OrganizationActiveLayout({ children }: OrganizationActiveLayoutProps) {
   return (
     <URQLProvider>
-      <Banner kind="warning">
-        We are experiencing some API issues. Please check the{' '}
-        <span style={{ display: 'inline-flex' }}>
-          <Link href="https://status.inngest.com/">status page.</Link>
-        </span>
-      </Banner>
+      <IncidentBanner />
       {children}
     </URQLProvider>
   );

ui/apps/dashboard/src/components/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import { Button } from '@inngest/components/Button';
 import { cn } from '@inngest/components/utils/classNames';
 import { RiCloseLine, RiErrorWarningLine, RiInformationLine } from '@remixicon/react';
 
-type Severity = 'info' | 'error' | 'warning';
+export type Severity = 'info' | 'error' | 'warning';
 
 const backgroundColors = {
   info: 'bg-blue-100',

ui/apps/dashboard/src/components/Banner/index.ts

@@ -1 +1 @@
-export { Banner } from './Banner';
+export { Banner, type Severity } from './Banner';