connectivity button

Reviewed By: elboman

Differential Revision: D47437819

fbshipit-source-id: fa6120f0714f81c99b2b0334a3b55a80d26f35b9

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

@@ -9,12 +9,7 @@
 
 import React, {cloneElement, useState, useCallback} from 'react';
 import {Button, Divider, Badge, Tooltip, Menu, Modal} from 'antd';
-import {
+import {MobileFilled, SettingOutlined, BugOutlined} from '@ant-design/icons';
-  MobileFilled,
-  SettingOutlined,
-  BugOutlined,
-  ApiOutlined,
-} from '@ant-design/icons';
 import {useStore} from '../utils/useStore';
 import {
   theme,
@@ -145,12 +140,6 @@ export const LeftRail = withTrackingScope(function LeftRail({
               setToplevelSelection('appinspect');
             }}
           />
-          {getRenderHostInstance().GK('flipper_connection_troubleshoot') && (
-            <ConnectionTroubleshootButton
-              toplevelSelection={toplevelSelection}
-              setToplevelSelection={setToplevelSelection}
-            />
-          )}
           <LeftRailDivider />
         </Layout.Container>
         <Layout.Container center gap={10} padh={6}>
@@ -286,22 +275,6 @@ function ExtrasMenu() {
   );
 }
 
-function ConnectionTroubleshootButton({
-  toplevelSelection,
-  setToplevelSelection,
-}: ToplevelProps) {
-  return (
-    <LeftRailButton
-      icon={<ApiOutlined />}
-      title="Connection Troubleshoot"
-      selected={toplevelSelection === 'connectivity'}
-      onClick={() => {
-        setToplevelSelection('connectivity');
-      }}
-    />
-  );
-}
-
 function ExportEverythingEverywhereAllAtOnceStatusModal({
   status,
   setStatus,

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

@@ -16,6 +16,7 @@ import {
   useValue,
   withTrackingScope,
 } from 'flipper-plugin';
+import {getRenderHostInstance} from 'flipper-frontend-core';
 import React, {cloneElement, useCallback, useMemo, useState} from 'react';
 import {useDispatch, useStore} from '../utils/useStore';
 import config from '../fb-stubs/config';
@@ -23,6 +24,7 @@ import {isConnected, currentUser, logoutUser} from '../fb-stubs/user';
 import {showLoginDialog} from '../chrome/fb-stubs/SignInSheet';
 import {Avatar, Badge, Button, Popover, Tooltip} from 'antd';
 import {
+  ApiOutlined,
   AppstoreAddOutlined,
   BellOutlined,
   CameraOutlined,
@@ -72,6 +74,12 @@ export const Navbar = withTrackingScope(function Navbar({
         <NavbarButton label="Screenshot" icon={CameraOutlined} />
         <NavbarButton label="Record" icon={VideoCameraOutlined} />
         <LaunchEmulatorButton />
+        {getRenderHostInstance().GK('flipper_connection_troubleshoot') && (
+          <ConnectionTroubleshootButton
+            toplevelSelection={toplevelSelection}
+            setToplevelSelection={setToplevelSelection}
+          />
+        )}
         {!isProduction() && (
           <div>
             <FpsGraph />
@@ -105,6 +113,22 @@ export const Navbar = withTrackingScope(function Navbar({
   );
 });
 
+function ConnectionTroubleshootButton({
+  toplevelSelection,
+  setToplevelSelection,
+}: ToplevelProps) {
+  return (
+    <NavbarButton
+      icon={ApiOutlined}
+      label="Connection Troubleshoot"
+      toggled={toplevelSelection === 'connectivity'}
+      onClick={() => {
+        setToplevelSelection('connectivity');
+      }}
+    />
+  );
+}
+
 function NotificationButton({
   toplevelSelection,
   setToplevelSelection,