From 7a5ad8a92d3d0996d648e6494f88a349a360d0e8 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Tue, 25 Jul 2023 07:28:03 -0700
Subject: [PATCH] Elevate alerts above troubleshoot

Summary: Similar treatment to troubleshoot problem

Reviewed By: lblasa

Differential Revision: D47720741

fbshipit-source-id: 6875988a9a0763cb4ed473d6e8522581fc27bef3
---
 desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
index 811c4402b..c0ac53ed9 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
@@ -237,6 +237,7 @@ function NotificationButton({
     <NavbarButton
       icon={BellOutlined}
       label="Alerts"
+      zIndex={AlertsZIndex}
       toggled={toplevelSelection === 'notification'}
       count={activeNotifications.length}
       onClick={() => setToplevelSelection('notification')}
@@ -327,10 +328,12 @@ export function NavbarButton({
   count,
   disabled = false,
   flipIcon = false,
+  zIndex,
 }: {
   icon: (props: any) => any;
   label: string;
   // TODO remove optional
+  zIndex?: number;
   onClick?: () => void;
   toggled?: boolean;
   count?: number | true;
@@ -374,6 +377,7 @@ export function NavbarButton({
   if (count !== undefined) {
     return (
       <Badge
+        style={{zIndex: zIndex}}
         {...{onClick}}
         dot={count === true}
         count={count}
@@ -465,6 +469,9 @@ const submenu = css`
   }
 `;
 
+const AlertsZIndex = 101;
+const TroubleShootZIndex = 100;
+
 function TroubleshootMenu({
   setToplevelSelection,
 }: {
@@ -500,7 +507,7 @@ function TroubleshootMenu({
   return (
     <>
       {/* using Badge **here** as NavbarButton badge is being cut off by Menu component */}
-      <Badge {...badgeProps} style={{zIndex: 100}}>
+      <Badge {...badgeProps} style={{zIndex: TroubleShootZIndex}}>
         <Menu
           mode="vertical"
           className={menu}