Move troubleshooting guide into a modal

Reviewed By: aigoncharov

Differential Revision: D48066773

fbshipit-source-id: 05aca8c75aa30325e1a8c5f31301db1e89ec25af

desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx

@@ -26,9 +26,7 @@ import {sideEffect} from '../utils/sideEffect';
 import {waitFor} from '../utils/waitFor';
 import {NotificationBody} from '../ui/components/NotificationBody';
 import {Layout} from '../ui';
-import {setStaticView} from '../reducers/connections';
-import {TroubleshootingHub} from '../chrome/TroubleshootingHub';
-import {setTopLevelSelection} from '../reducers/application';
+import {toggleConnectivityModal} from '../reducers/application';
 
 export function connectFlipperServerToStore(
   server: FlipperServer,
@@ -314,8 +312,7 @@ function showConnectivityTroubleshootNotification(
             type="primary"
             style={{float: 'right'}}
             onClick={() => {
-              store.dispatch(setTopLevelSelection('connectivity'));
-              store.dispatch(setStaticView(TroubleshootingHub));
+              store.dispatch(toggleConnectivityModal());
               notification.close(key);
             }}>
             Troubleshoot

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

@@ -11,11 +11,7 @@ import {v1 as uuidv1} from 'uuid';
 import {getRenderHostInstance} from 'flipper-frontend-core';
 import {Actions} from './';
 
-export type ToplevelNavigationItem =
-  | 'appinspect'
-  | 'notification'
-  | 'connectivity'
-  | undefined;
+export type ToplevelNavigationItem = 'appinspect' | 'notification' | undefined;
 
 export type LauncherMsg = {
   message: string;
@@ -44,7 +40,7 @@ export type ShareType = {
 
 export type State = {
   topLevelSelection: ToplevelNavigationItem;
-  hasLeftSidebar: boolean;
+  isTroubleshootingModalOpen: boolean;
   leftSidebarVisible: boolean;
   rightSidebarVisible: boolean;
   rightSidebarAvailable: boolean;
@@ -88,11 +84,15 @@ export type Action =
   | {
       type: 'REMOVE_STATUS_MSG';
       payload: {msg: string; sender: string};
+    }
+  | {
+      type: 'TOGGLE_CONNECTIVITY_MODAL';
     };
 
 export const initialState: () => State = () => ({
   topLevelSelection: 'appinspect',
   hasLeftSidebar: true,
+  isTroubleshootingModalOpen: false,
   leftSidebarVisible: true,
   rightSidebarVisible: true,
   rightSidebarAvailable: false,
@@ -125,7 +125,6 @@ export default function reducer(
 ): State {
   state = state || initialState();
   if (
-    action.type === 'hasLeftSidebar' ||
     action.type === 'leftSidebarVisible' ||
     action.type === 'rightSidebarVisible' ||
     action.type === 'rightSidebarAvailable'
@@ -147,16 +146,15 @@ export default function reducer(
   } else if (action.type === 'topLevelSelection') {
     const topLevelSelection = action.payload;
 
-    const hasLeftSidebar =
-      topLevelSelection === 'appinspect' ||
-      topLevelSelection === 'notification';
-
     return {
       ...state,
-      leftSidebarVisible: hasLeftSidebar,
-      hasLeftSidebar,
       topLevelSelection,
     };
+  } else if (action.type === 'TOGGLE_CONNECTIVITY_MODAL') {
+    return {
+      ...state,
+      isTroubleshootingModalOpen: !state.isTroubleshootingModalOpen,
+    };
   } else if (action.type === 'windowIsFocused') {
     return {
       ...state,
@@ -206,6 +204,10 @@ export const setTopLevelSelection = (
   payload,
 });
 
+export const toggleConnectivityModal = (): Action => ({
+  type: 'TOGGLE_CONNECTIVITY_MODAL',
+});
+
 export const toggleLeftSidebarVisible = (payload?: boolean): Action => ({
   type: 'leftSidebarVisible',
   payload,

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

@@ -34,6 +34,7 @@ import {
 } from '@ant-design/icons';
 import {
   setTopLevelSelection,
+  toggleConnectivityModal,
   toggleLeftSidebarVisible,
   toggleRightSidebarVisible,
   ToplevelNavigationItem,
@@ -268,25 +269,20 @@ function NotificationButton({
 
 function LeftSidebarToggleButton() {
   const dispatch = useDispatch();
-  const hasMainMenu = useStore((state) => state.application.hasLeftSidebar);
   const mainMenuVisible = useStore(
     (state) => state.application.leftSidebarVisible,
   );
 
-  if (hasMainMenu) {
-    return (
-      <NavbarButton
-        label="Sidebar"
-        icon={LayoutOutlined}
-        toggled={mainMenuVisible}
-        onClick={() => {
-          dispatch(toggleLeftSidebarVisible());
-        }}
-      />
-    );
-  }
-
-  return null;
+  return (
+    <NavbarButton
+      label="Sidebar"
+      icon={LayoutOutlined}
+      toggled={mainMenuVisible}
+      onClick={() => {
+        dispatch(toggleLeftSidebarVisible());
+      }}
+    />
+  );
 }
 
 function RightSidebarToggleButton() {
@@ -517,8 +513,7 @@ function TroubleshootMenu() {
             <Menu.Item
               key="connectivity"
               onClick={() => {
-                store.dispatch(setTopLevelSelection('connectivity'));
-                store.dispatch(setStaticView(TroubleshootingHub));
+                store.dispatch(toggleConnectivityModal());
               }}>
               Troubleshoot Connectivity
             </Menu.Item>
@@ -553,10 +548,33 @@ function TroubleshootMenu() {
         isOpen={isFlipperDevToolsModalOpen}
         onClose={() => setFlipperDevToolsModalOpen(false)}
       />
+      <TroubleshootingModal />
     </>
   );
 }
 
+function TroubleshootingModal() {
+  const store = useStore();
+  const isOpen = useStore(
+    (state) => state.application.isTroubleshootingModalOpen,
+  );
+  return (
+    <Modal
+      visible={isOpen}
+      onCancel={() => store.dispatch(toggleConnectivityModal())}
+      width="100%"
+      footer={null}
+      style={{
+        // override default `top: 100px`
+        top: '5vh',
+      }}>
+      <div style={{minHeight: '80vh', width: '100%', display: 'flex'}}>
+        <TroubleshootingHub />
+      </div>
+    </Modal>
+  );
+}
+
 function FlipperDevToolsModal({
   isOpen,
   onClose,