From cd3b8934ed21d79f5e4de2f8d4e493f041e55b02 Mon Sep 17 00:00:00 2001
From: Marcus Hof <13001502+MarconLP@users.noreply.github.com>
Date: Tue, 16 Apr 2024 19:25:50 +0200
Subject: [PATCH] feat: show banner when there is an incident (#21553)

* show banner when there is an incident

* center button text and add background
---
 .../sidepanel/panels/SidePanelSupport.tsx     | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
index 1868dc2132871..d152b958d7c9a 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
@@ -11,7 +11,7 @@ import {
     IconToggle,
     IconTrends,
 } from '@posthog/icons'
-import { LemonButton, Link } from '@posthog/lemon-ui'
+import { LemonBanner, LemonButton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { SupportForm } from 'lib/components/Support/SupportForm'
 import { getPublicSupportSnippet, supportLogic } from 'lib/components/Support/supportLogic'
@@ -27,6 +27,7 @@ import AlgoliaSearch from '../../components/AlgoliaSearch'
 import { SidePanelPaneHeader } from '../components/SidePanelPaneHeader'
 import { SIDE_PANEL_TABS } from '../SidePanel'
 import { sidePanelStateLogic } from '../sidePanelStateLogic'
+import { sidePanelStatusLogic } from './sidePanelStatusLogic'
 
 const PRODUCTS = [
     {
@@ -142,13 +143,14 @@ const SupportFormBlock = ({ onCancel }: { onCancel: () => void }): JSX.Element =
 }
 
 export const SidePanelSupport = (): JSX.Element => {
-    const { closeSidePanel } = useActions(sidePanelStateLogic)
+    const { openSidePanel, closeSidePanel } = useActions(sidePanelStateLogic)
     const { hasAvailableFeature } = useValues(userLogic)
     const { openEmailForm, closeEmailForm } = useActions(supportLogic)
     const { isEmailFormOpen } = useValues(supportLogic)
     const { preflight } = useValues(preflightLogic)
     const { user } = useValues(userLogic)
     const region = preflight?.region
+    const { status } = useValues(sidePanelStatusLogic)
 
     const theLogic = supportLogic({ onClose: () => closeSidePanel(SidePanelTab.Support) })
     const { title } = useValues(theLogic)
@@ -186,6 +188,26 @@ export const SidePanelSupport = (): JSX.Element => {
                         </ul>
                     </Section>
 
+                    {status !== 'operational' ? (
+                        <Section title="">
+                            <LemonBanner type={status.includes('outage') ? 'error' : 'warning'}>
+                                <div>
+                                    <span>We are experiencing {status.includes('outage') ? 'major' : ''} issues.</span>
+                                    <LemonButton
+                                        type="secondary"
+                                        fullWidth
+                                        center
+                                        targetBlank
+                                        onClick={() => openSidePanel(SidePanelTab.Status)}
+                                        className="mt-2 bg-[white]"
+                                    >
+                                        View system status
+                                    </LemonButton>
+                                </div>
+                            </LemonBanner>
+                        </Section>
+                    ) : null}
+
                     {hasAvailableFeature(AvailableFeature.EMAIL_SUPPORT) ? (
                         <>
                             <Section title="Contact us">