notification button

Reviewed By: elboman

Differential Revision: D47437749

fbshipit-source-id: 6dd7ded014e79b23328f59994e053d4d48c4eb65

desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx

@@ -11,7 +11,6 @@ import React, {cloneElement, useState, useCallback} from 'react';
 import {Button, Divider, Badge, Tooltip, Menu, Modal} from 'antd';
 import {
   MobileFilled,
-  BellOutlined,
   SettingOutlined,
   BugOutlined,
   ApiOutlined,
@@ -31,8 +30,6 @@ import config from '../fb-stubs/config';
 import styled from '@emotion/styled';
 import {setStaticView} from '../reducers/connections';
 import {SandyRatingButton} from '../chrome/RatingButton';
-import {filterNotifications} from './notification/notificationUtils';
-import {useMemoize} from 'flipper-plugin';
 import UpdateIndicator from '../chrome/UpdateIndicator';
 import constants from '../fb-stubs/constants';
 import {
@@ -148,10 +145,6 @@ export const LeftRail = withTrackingScope(function LeftRail({
               setToplevelSelection('appinspect');
             }}
           />
-          <NotificationButton
-            toplevelSelection={toplevelSelection}
-            setToplevelSelection={setToplevelSelection}
-          />
           {getRenderHostInstance().GK('flipper_connection_troubleshoot') && (
             <ConnectionTroubleshootButton
               toplevelSelection={toplevelSelection}
@@ -293,27 +286,6 @@ function ExtrasMenu() {
   );
 }
 
-function NotificationButton({
-  toplevelSelection,
-  setToplevelSelection,
-}: ToplevelProps) {
-  const notifications = useStore((state) => state.notifications);
-  const activeNotifications = useMemoize(filterNotifications, [
-    notifications.activeNotifications,
-    notifications.blocklistedPlugins,
-    notifications.blocklistedCategories,
-  ]);
-  return (
-    <LeftRailButton
-      icon={<BellOutlined />}
-      title="Notifications"
-      selected={toplevelSelection === 'notification'}
-      count={activeNotifications.length}
-      onClick={() => setToplevelSelection('notification')}
-    />
-  );
-}
-
 function ConnectionTroubleshootButton({
   toplevelSelection,
   setToplevelSelection,

desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx

@@ -12,6 +12,7 @@ import {
   Layout,
   styled,
   theme,
+  useMemoize,
   useValue,
   withTrackingScope,
 } from 'flipper-plugin';
@@ -47,6 +48,7 @@ import {isProduction} from 'flipper-common';
 import FpsGraph from '../chrome/FpsGraph';
 import NetworkGraph from '../chrome/NetworkGraph';
 import {errorCounterAtom} from '../chrome/ConsoleLogs';
+import {filterNotifications} from './notification/notificationUtils';
 import {css} from '@emotion/css';
 
 export const Navbar = withTrackingScope(function Navbar({
@@ -89,7 +91,10 @@ export const Navbar = withTrackingScope(function Navbar({
           toplevelSelection={toplevelSelection}
           setToplevelSelection={setToplevelSelection}
         />
-        <NavbarButton label="Alerts" icon={BellOutlined} />
+        <NotificationButton
+          toplevelSelection={toplevelSelection}
+          setToplevelSelection={setToplevelSelection}
+        />
         <SetupDoctorButton />
         <NavbarButton label="Help" icon={QuestionCircleOutlined} />
         <NavbarButton label="More" icon={EllipsisOutlined} />
@@ -100,6 +105,27 @@ export const Navbar = withTrackingScope(function Navbar({
   );
 });
 
+function NotificationButton({
+  toplevelSelection,
+  setToplevelSelection,
+}: ToplevelProps) {
+  const notifications = useStore((state) => state.notifications);
+  const activeNotifications = useMemoize(filterNotifications, [
+    notifications.activeNotifications,
+    notifications.blocklistedPlugins,
+    notifications.blocklistedCategories,
+  ]);
+  return (
+    <NavbarButton
+      icon={BellOutlined}
+      label="Alerts"
+      toggled={toplevelSelection === 'notification'}
+      count={activeNotifications.length}
+      onClick={() => setToplevelSelection('notification')}
+    />
+  );
+}
+
 function LeftSidebarToggleButton() {
   const dispatch = useDispatch();
   const mainMenuVisible = useStore(
@@ -216,7 +242,6 @@ function NavbarButton({
 }: {
   icon: (props: any) => any;
   label: string;
-  selected?: boolean;
   // TODO remove optional
   onClick?: () => void;
   toggled?: boolean;