feat(Support status redirect): add status to support panel

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx

@@ -1,7 +1,7 @@
 import { useActions, useValues } from 'kea'
 import React from 'react'
 
-import { IconFeatures, IconHelmet, IconMap } from '@posthog/icons'
+import { IconFeatures, IconHelmet, IconMap, IconWarning } from '@posthog/icons'
 import { LemonButton, Link } from '@posthog/lemon-ui'
 
 import { SupportForm } from 'lib/components/Support/SupportForm'
@@ -20,6 +20,8 @@ import { AvailableFeature, BillingFeatureType, BillingPlan, BillingType, SidePan
 
 import { SidePanelPaneHeader } from '../components/SidePanelPaneHeader'
 import { sidePanelLogic } from '../sidePanelLogic'
+import { sidePanelStatusIncidentIoLogic } from './sidePanelStatusIncidentIoLogic'
+import { sidePanelStatusLogic } from './sidePanelStatusLogic'
 
 const Section = ({ title, children }: { title: string; children: React.ReactNode }): React.ReactElement => {
     return (
@@ -32,6 +34,54 @@ const Section = ({ title, children }: { title: string; children: React.ReactNode
     )
 }
 
+const StatusPageAlert = (): JSX.Element | null => {
+    const { featureFlags } = useValues(featureFlagLogic)
+    const useIncidentIo = !!featureFlags[FEATURE_FLAGS.INCIDENT_IO_STATUS_PAGE]
+    const { openSidePanel } = useActions(sidePanelLogic)
+
+    const { status: atlassianStatus, statusPage } = useValues(sidePanelStatusLogic)
+    const { status: incidentIoStatus, statusDescription: incidentIoDescription } =
+        useValues(sidePanelStatusIncidentIoLogic)
+
+    const status = useIncidentIo ? incidentIoStatus : atlassianStatus
+
+    if (status === 'operational') {
+        return null
+    }
+
+    const description = useIncidentIo
+        ? incidentIoDescription
+        : statusPage?.status.description || 'We are experiencing issues'
+
+    const severityClass = status.includes('outage')
+        ? 'bg-danger-highlight border-danger'
+        : 'bg-warning-highlight border-warning'
+
+    return (
+        <div className={`border rounded p-3 mb-3 ${severityClass}`}>
+            <div className="flex items-start gap-2">
+                <IconWarning className="text-warning w-5 h-5 shrink-0 mt-0.5" />
+                <div className="flex-1">
+                    <p className="font-semibold mb-1">{description}</p>
+                    <p className="text-sm mb-2">
+                        We're aware of issues that may affect your experience. Check our status page for updates before
+                        contacting support.
+                    </p>
+                    <LemonButton
+                        type="secondary"
+                        size="small"
+                        fullWidth
+                        center
+                        onClick={() => openSidePanel(SidePanelTab.Status)}
+                    >
+                        View status page
+                    </LemonButton>
+                </div>
+            </div>
+        </div>
+    )
+}
+
 // In order to set these turn on the `support-message-override` feature flag.
 
 //Support offsite messaging
@@ -323,6 +373,7 @@ export function SidePanelSupport(): JSX.Element {
 
                             {showEmailSupport && isBillingLoaded && (
                                 <Section title="Contact us">
+                                    <StatusPageAlert />
                                     <p>Can't find what you need and PostHog AI unable to help?</p>
                                     <LemonButton
                                         type="secondary"