Flipper logs displayed in a modal

Summary: This is a continuation of flipper redesign. Next diff will mov notification and connectivity into modals as well

Reviewed By: LukeDefeo

Differential Revision: D48066573

fbshipit-source-id: 3b4a22462221d8da13b07ad1738e05de849e00c4

desktop/flipper-ui-core/src/chrome/ConsoleLogs.tsx

@@ -91,7 +91,7 @@ export function ConsoleLogs() {
 
   return (
     <Layout.Top>
-      <Toolbar wash>
+      <Toolbar>
         <Button onClick={clearLogs} icon={<DeleteOutlined />}>
           Clear Logs
         </Button>

desktop/flipper-ui-core/src/reducers/application.tsx

@@ -13,7 +13,6 @@ import {Actions} from './';
 
 export type ToplevelNavigationItem =
   | 'appinspect'
-  | 'flipperlogs'
   | 'notification'
   | 'connectivity'
   | undefined;

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

@@ -470,6 +470,8 @@ function TroubleshootMenu() {
   const [status, setStatus] = useState<
     ExportEverythingEverywhereAllAtOnceStatus | undefined
   >();
+  const [isFlipperDevToolsModalOpen, setFlipperDevToolsModalOpen] =
+    useState(false);
 
   const exportEverythingEverywhereAllAtOnceTracked = useTrackedCallback(
     'Debug data export',
@@ -530,8 +532,7 @@ function TroubleshootMenu() {
             <Menu.Item
               key="flipperlogs"
               onClick={() => {
-                store.dispatch(setTopLevelSelection('flipperlogs'));
+                setFlipperDevToolsModalOpen(true);
-                store.dispatch(setStaticView(FlipperDevTools));
               }}>
               <Layout.Horizontal center gap="small">
                 Flipper Logs <Badge count={flipperErrorLogCount} />
@@ -548,10 +549,38 @@ function TroubleshootMenu() {
         status={status}
         setStatus={setStatus}
       />
+      <FlipperDevToolsModal
+        isOpen={isFlipperDevToolsModalOpen}
+        onClose={() => setFlipperDevToolsModalOpen(false)}
+      />
     </>
   );
 }
 
+function FlipperDevToolsModal({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <Modal
+      visible={isOpen}
+      onCancel={onClose}
+      width="100%"
+      footer={null}
+      style={{
+        // override default `top: 100px`
+        top: '5vh',
+      }}>
+      <div style={{minHeight: '85vh', width: '100%', display: 'flex'}}>
+        <FlipperDevTools />
+      </div>
+    </Modal>
+  );
+}
+
 function ExtrasMenu() {
   const store = useStore();