move app status message to navbar

Summary: Don't mind busy navbar, flipper debugger buttons will be moved into a menu down the stack

Reviewed By: elboman

Differential Revision: D47469851

fbshipit-source-id: b29367810287d77106a56a5b1ae4aec49188e8fc

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

@@ -80,6 +80,7 @@ import {
   NavbarScreenRecordButton,
   NavbarScreenshotButton,
 } from '../chrome/ScreenCaptureButtons';
+import {StatusMessage} from './appinspect/AppInspect';
 
 export const Navbar = withTrackingScope(function Navbar({
   toplevelSelection,
@@ -106,7 +107,8 @@ export const Navbar = withTrackingScope(function Navbar({
             setToplevelSelection('appinspect');
           }}
         />
-        <DevicePicker />
+        <AppSelector />
+        <StatusMessage />
         <NavbarScreenshotButton />
         <NavbarScreenRecordButton />
         <LaunchEmulatorButton />
@@ -495,10 +497,6 @@ export function NavbarButton({
   }
 }
 
-function DevicePicker() {
-  return <AppSelector />;
-}
-
 function LoginConnectivityButton() {
   const loggedIn = useValue(currentUser());
   const user = useStore((state) => state.user);

desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppInspect.tsx

@@ -44,7 +44,6 @@ export function AppInspect() {
   const activeDevice = useSelector(getActiveDevice);
   const isDeviceConnected = useValue(activeDevice?.connected, false);
   const isAppConnected = useValue(client?.connected, false);
-  const hasSelectableDevices = useSelector(connections.hasSelectableDevices);
 
   return (
     <LeftSidebar>
@@ -54,13 +53,6 @@ export function AppInspect() {
             App Inspect
           </SidebarTitle>
           <Layout.Container padv="small" padh="medium" gap={theme.space.large}>
-            {renderStatusMessage(
-              isDeviceConnected,
-              activeDevice,
-              client,
-              isAppConnected,
-              hasSelectableDevices,
-            )}
             {isDeviceConnected && isAppConnected && <BookmarkSection />}
             {isDeviceConnected && activeDevice && (
               <Toolbar gap>
@@ -91,6 +83,25 @@ const Toolbar = styled(Layout.Horizontal)({
   },
 });
 
+export function StatusMessage() {
+  const client = useSelector(getActiveClient);
+  const activeDevice = useSelector(getActiveDevice);
+  const isDeviceConnected = useValue(activeDevice?.connected, false);
+  const isAppConnected = useValue(client?.connected, false);
+  const hasSelectableDevices = useSelector(connections.hasSelectableDevices);
+  return (
+    <>
+      {renderStatusMessage(
+        isDeviceConnected,
+        activeDevice,
+        client,
+        isAppConnected,
+        hasSelectableDevices,
+      )}
+    </>
+  );
+}
+
 function renderStatusMessage(
   isDeviceConnected: boolean,
   activeDevice: BaseDevice | null,