doctor button

Reviewed By: lblasa

Differential Revision: D47435889

fbshipit-source-id: ff3eef79f50f3b63ada46c6d8349860906e28715

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({
           )}
           <UpdateIndicator />
           <SandyRatingButton />
-          <SetupDoctorButton />
           <RightSidebarToggleButton />
           <ExportEverythingEverywhereAllAtOnceButton />
           <ExtrasMenu />
@@ -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 (
-    <>
-      <LeftRailButton
-        icon={<MedicineBoxOutlined />}
-        small
-        title="Setup Doctor"
-        count={hasNewProblem ? true : undefined}
-        onClick={() => setVisible(true)}
-      />
-      <SetupDoctorScreen visible={visible} onClose={onClose} />
-    </>
-  );
-}

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() {
         />
         <NavbarButton label="Logs" icon={FileExclamationOutlined} />
         <NavbarButton label="Alerts" icon={BellOutlined} />
-        <NavbarButton label="Doctor" icon={MedicineBoxOutlined} />
+        <SetupDoctorButton />
         <NavbarButton label="Help" icon={QuestionCircleOutlined} />
         <NavbarButton label="More" icon={EllipsisOutlined} />
         {config.showLogin && <LoginConnectivityButton />}
@@ -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 (
+    <>
+      <NavbarButton
+        icon={MedicineBoxOutlined}
+        label="Setup Doctor"
+        count={hasNewProblem ? true : undefined}
+        onClick={() => setVisible(true)}
+      />
+      <SetupDoctorScreen visible={visible} onClose={onClose} />
+    </>
+  );
+}
+
 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 (