From 60419c54f27596dd4761cda7a9d8ede0ba8a09e3 Mon Sep 17 00:00:00 2001
From: Anton Kastritskiy <antonk52@meta.com>
Date: Mon, 7 Aug 2023 03:54:28 -0700
Subject: [PATCH] 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
---
 .../src/chrome/ConsoleLogs.tsx                |  2 +-
 .../src/reducers/application.tsx              |  1 -
 .../src/sandy-chrome/Navbar.tsx               | 33 +++++++++++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/desktop/flipper-ui-core/src/chrome/ConsoleLogs.tsx b/desktop/flipper-ui-core/src/chrome/ConsoleLogs.tsx
index 1c0b753bd..65766907c 100644
--- a/desktop/flipper-ui-core/src/chrome/ConsoleLogs.tsx
+++ b/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>
diff --git a/desktop/flipper-ui-core/src/reducers/application.tsx b/desktop/flipper-ui-core/src/reducers/application.tsx
index 33cd8159a..a0432b6f8 100644
--- a/desktop/flipper-ui-core/src/reducers/application.tsx
+++ b/desktop/flipper-ui-core/src/reducers/application.tsx
@@ -13,7 +13,6 @@ import {Actions} from './';
 
 export type ToplevelNavigationItem =
   | 'appinspect'
-  | 'flipperlogs'
   | 'notification'
   | 'connectivity'
   | undefined;
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
index 34a8e43ce..697098420 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
+++ b/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'));
-                store.dispatch(setStaticView(FlipperDevTools));
+                setFlipperDevToolsModalOpen(true);
               }}>
               <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();