diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx index b23042a22..3d3c6febd 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx @@ -7,14 +7,13 @@ * @format */ -import React, {cloneElement, useState, useCallback, useMemo} from 'react'; +import React, {cloneElement, useState, useCallback} from 'react'; import {Button, Divider, Badge, Tooltip, Menu, Modal} from 'antd'; import { MobileFilled, BellOutlined, FileExclamationOutlined, SettingOutlined, - MedicineBoxOutlined, BugOutlined, ApiOutlined, } from '@ant-design/icons'; @@ -28,7 +27,6 @@ import { useTrackedCallback, NUX, } from 'flipper-plugin'; -import SetupDoctorScreen, {checkHasNewProblem} from './SetupDoctorScreen'; import SettingsSheet from '../chrome/SettingsSheet'; import WelcomeScreen from './WelcomeScreen'; import {errorCounterAtom} from '../chrome/ConsoleLogs'; @@ -183,7 +181,6 @@ export const LeftRail = withTrackingScope(function LeftRail({ )} - @@ -528,24 +525,3 @@ function ExportEverythingEverywhereAllAtOnceButton() { ); } - -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 ( - <> - } - small - title="Setup Doctor" - count={hasNewProblem ? true : undefined} - onClick={() => setVisible(true)} - /> - - - ); -} diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx index 258947b3d..3ac7a48fd 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx @@ -8,7 +8,7 @@ */ import {Dialog, Layout, styled, theme, useValue} from 'flipper-plugin'; -import React, {cloneElement, useCallback, useState} from 'react'; +import React, {cloneElement, useCallback, useMemo, useState} from 'react'; import {useDispatch, useStore} from '../utils/useStore'; import config from '../fb-stubs/config'; import {isConnected, currentUser, logoutUser} from '../fb-stubs/user'; @@ -31,6 +31,7 @@ import { import {toggleLeftSidebarVisible} from '../reducers/application'; import PluginManager from '../chrome/plugin-manager/PluginManager'; import {showEmulatorLauncher} from './appinspect/LaunchEmulator'; +import SetupDoctorScreen, {checkHasNewProblem} from './SetupDoctorScreen'; export function Navbar() { return ( @@ -61,7 +62,7 @@ export function Navbar() { /> - + {config.showLogin && } @@ -102,6 +103,26 @@ function LaunchEmulatorButton() { ); } +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)} + /> + + + ); +} + function NavbarButton({ icon: Icon, label, @@ -114,6 +135,8 @@ function NavbarButton({ // TODO remove optional onClick?: () => void; toggled?: boolean; + /** red bubble in top right corner, notification like */ + count?: number | true; }) { const color = toggled ? theme.primaryColor : theme.textColorActive; return (