diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx index f09a0574f..e0df26fa3 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx @@ -32,15 +32,12 @@ import {isConnected, currentUser, logoutUser} from '../fb-stubs/user'; import {showLoginDialog} from '../chrome/fb-stubs/SignInSheet'; import {Avatar, Badge, Button, Menu, Modal, Popover, Tooltip} from 'antd'; import { - ApiOutlined, AppstoreAddOutlined, BellOutlined, BugOutlined, ExportOutlined, - FileExclamationOutlined, LayoutOutlined, LoginOutlined, - MedicineBoxOutlined, MobileOutlined, RocketOutlined, SettingOutlined, @@ -50,7 +47,7 @@ import { toggleLeftSidebarVisible, toggleRightSidebarVisible, } from '../reducers/application'; -import {ToplevelProps} from './SandyApp'; +import {ToplevelNavItem, ToplevelProps} from './SandyApp'; import PluginManager from '../chrome/plugin-manager/PluginManager'; import {showEmulatorLauncher} from './appinspect/LaunchEmulator'; import SetupDoctorScreen, {checkHasNewProblem} from './SetupDoctorScreen'; @@ -113,12 +110,6 @@ export const Navbar = withTrackingScope(function Navbar({ - {getRenderHostInstance().GK('flipper_connection_troubleshoot') && ( - - )} {!isProduction() && (
@@ -134,17 +125,12 @@ export const Navbar = withTrackingScope(function Navbar({ Dialog.showModal((onHide) => ); }} /> - - + - {config.showLogin && } @@ -288,22 +274,6 @@ function ExportEverythingEverywhereAllAtOnceStatusModal({ ); } -function ConnectionTroubleshootButton({ - toplevelSelection, - setToplevelSelection, -}: ToplevelProps) { - return ( - { - setToplevelSelection('connectivity'); - }} - /> - ); -} - function NotificationButton({ toplevelSelection, setToplevelSelection, @@ -380,44 +350,6 @@ function LaunchVirtualDeviceButton() { ); } -function DebugLogsButton({ - toplevelSelection, - setToplevelSelection, -}: ToplevelProps) { - const errorCount = useValue(errorCounterAtom); - return ( - { - setToplevelSelection('flipperlogs'); - }} - /> - ); -} - -function SetupDoctorButton() { - const [visible, setVisible] = useState(false); - const result = useStore( - (state) => state.healthchecks.healthcheckReport.result, - ); - const hasNewProblem = useMemo(() => checkHasNewProblem(result), [result]); - const onClose = useCallback(() => setVisible(false), []); - return ( - <> - setVisible(true)} - /> - - - ); -} - const badgeDotClassname = css` sup { right: calc(50% - 14px); @@ -647,24 +579,64 @@ const submenu = css` } `; -function TroubleshootMenu() { +function TroubleshootMenu({ + setToplevelSelection, +}: { + setToplevelSelection: (x: ToplevelNavItem) => void; +}) { + const [isDoctorVisible, setIsDoctorVisible] = useState(false); + const result = useStore( + (state) => state.healthchecks.healthcheckReport.result, + ); + const hasNewProblem = useMemo(() => checkHasNewProblem(result), [result]); + const flipperErrorLogCount = useValue(errorCounterAtom); + + const count = flipperErrorLogCount || hasNewProblem || 0; + + const badgeProps: Parameters[0] = + count === true ? {dot: true, offset: [-8, 8]} : {count, offset: [-6, 5]}; + return ( - - } - className={submenu}> - TODO troubleshooting guide - TODO troubleshoot - TODO flipper logs - TODO setup doctor - - + <> + {/* using Badge **here** as NavbarButton badge is being cut off by Menu component */} + + + } + className={submenu}> + {getRenderHostInstance().GK('flipper_connection_troubleshoot') && ( + setToplevelSelection('connectivity')}> + Troubleshoot connectivity + + )} + setToplevelSelection('flipperlogs')}> + + Flipper Logs + + + setIsDoctorVisible(true)}> + Setup Doctor + + + + + setIsDoctorVisible(false)} + /> + ); }