Move notifications into a modal and remove app inspect

Summary: Also removing topLevelSelection as it is no longer used in flipper

Reviewed By: aigoncharov

Differential Revision: D48069386

fbshipit-source-id: 6e4cdd6aab67d2cd30ac1884118703520125bf84

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

@@ -11,8 +11,6 @@ import {v1 as uuidv1} from 'uuid';
 import {getRenderHostInstance} from 'flipper-frontend-core';
 import {Actions} from './';
 
-export type ToplevelNavigationItem = 'appinspect' | 'notification' | undefined;
-
 export type LauncherMsg = {
   message: string;
   severity: 'warning' | 'error';
@@ -39,8 +37,8 @@ export type ShareType = {
 } & SubShareType;
 
 export type State = {
-  topLevelSelection: ToplevelNavigationItem;
   isTroubleshootingModalOpen: boolean;
+  isNotificationModalOpen: boolean;
   leftSidebarVisible: boolean;
   rightSidebarVisible: boolean;
   rightSidebarAvailable: boolean;
@@ -54,6 +52,7 @@ export type State = {
 type BooleanActionType =
   | 'hasLeftSidebar'
   | 'leftSidebarVisible'
+  | 'isNotificationModalOpen'
   | 'rightSidebarVisible'
   | 'rightSidebarAvailable';
 
@@ -62,10 +61,6 @@ export type Action =
       type: BooleanActionType;
       payload?: boolean;
     }
-  | {
-      type: 'topLevelSelection';
-      payload: ToplevelNavigationItem;
-    }
   | {
       type: 'windowIsFocused';
       payload: {isFocused: boolean; time: number};
@@ -93,6 +88,7 @@ export const initialState: () => State = () => ({
   topLevelSelection: 'appinspect',
   hasLeftSidebar: true,
   isTroubleshootingModalOpen: false,
+  isNotificationModalOpen: false,
   leftSidebarVisible: true,
   rightSidebarVisible: true,
   rightSidebarAvailable: false,
@@ -127,6 +123,7 @@ export default function reducer(
   if (
     action.type === 'leftSidebarVisible' ||
     action.type === 'rightSidebarVisible' ||
+    action.type === 'isNotificationModalOpen' ||
     action.type === 'rightSidebarAvailable'
   ) {
     const newValue =
@@ -143,13 +140,6 @@ export default function reducer(
         [action.type]: newValue,
       };
     }
-  } else if (action.type === 'topLevelSelection') {
-    const topLevelSelection = action.payload;
-
-    return {
-      ...state,
-      topLevelSelection,
-    };
   } else if (action.type === 'TOGGLE_CONNECTIVITY_MODAL') {
     return {
       ...state,
@@ -197,13 +187,6 @@ export const toggleAction = (
   payload,
 });
 
-export const setTopLevelSelection = (
-  payload: ToplevelNavigationItem,
-): Action => ({
-  type: 'topLevelSelection',
-  payload,
-});
-
 export const toggleConnectivityModal = (): Action => ({
   type: 'TOGGLE_CONNECTIVITY_MODAL',
 });

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

@@ -27,17 +27,14 @@ import {
   BellOutlined,
   BugOutlined,
   LayoutOutlined,
-  MobileOutlined,
   RocketOutlined,
   SettingOutlined,
   WarningOutlined,
 } from '@ant-design/icons';
 import {
-  setTopLevelSelection,
   toggleConnectivityModal,
   toggleLeftSidebarVisible,
   toggleRightSidebarVisible,
-  ToplevelNavigationItem,
 } from '../reducers/application';
 import PluginManager from '../chrome/plugin-manager/PluginManager';
 import {showEmulatorLauncher} from './appinspect/LaunchEmulator';
@@ -59,11 +56,11 @@ import {
 import UpdateIndicator from '../chrome/UpdateIndicator';
 import {css} from '@emotion/css';
 import constants from '../fb-stubs/constants';
-import {selectPlugin, setStaticView} from '../reducers/connections';
+import {setStaticView} from '../reducers/connections';
 import {StyleGuide} from './StyleGuide';
 import {openDeeplinkDialog} from '../deeplink';
 import SettingsSheet from '../chrome/SettingsSheet';
-import WelcomeScreen, {WelcomeScreenStaticView} from './WelcomeScreen';
+import WelcomeScreen from './WelcomeScreen';
 import {AppSelector} from './appinspect/AppSelector';
 import {
   NavbarScreenRecordButton,
@@ -73,19 +70,9 @@ import {StatusMessage} from './appinspect/AppInspect';
 import {TroubleshootingGuide} from './appinspect/fb-stubs/TroubleshootingGuide';
 import {FlipperDevTools} from '../chrome/FlipperDevTools';
 import {TroubleshootingHub} from '../chrome/TroubleshootingHub';
+import {Notification} from './notification/Notification';
 
 export const Navbar = withTrackingScope(function Navbar() {
-  const {topLevelSelection, selectedDevice, selectedAppId, selectedPlugin} =
-    useStore((state) => {
-      return {
-        topLevelSelection: state.application.topLevelSelection,
-        selectedDevice: state.connections.selectedDevice,
-        selectedAppId: state.connections.selectedAppId,
-        selectedPlugin: state.connections.selectedPlugin,
-      };
-    });
-
-  const dispatch = useDispatch();
   return (
     <Layout.Horizontal
       borderBottom
@@ -99,25 +86,6 @@ export const Navbar = withTrackingScope(function Navbar() {
       }}>
       <Layout.Horizontal style={{gap: 6}}>
         <LeftSidebarToggleButton />
-        <NavbarButton
-          icon={MobileOutlined}
-          label="App Inspect"
-          toggled={topLevelSelection === 'appinspect'}
-          onClick={() => {
-            dispatch(setTopLevelSelection('appinspect'));
-            if (selectedPlugin) {
-              dispatch(
-                selectPlugin({
-                  selectedPlugin,
-                  selectedAppId,
-                  selectedDevice: selectedDevice,
-                }),
-              );
-            } else {
-              dispatch(setStaticView(WelcomeScreenStaticView));
-            }
-          }}
-        />
         <AppSelector />
         <StatusMessage />
         <NavbarScreenshotButton />
@@ -133,7 +101,7 @@ export const Navbar = withTrackingScope(function Navbar() {
       <Layout.Horizontal style={{gap: 6, alignItems: 'center'}}>
         <NoConnectivityWarning />
 
-        <NotificationButton topLevelSelection={topLevelSelection} />
+        <NotificationButton />
         <TroubleshootMenu />
         <ExtrasMenu />
         <RightSidebarToggleButton />
@@ -243,27 +211,38 @@ function ExportEverythingEverywhereAllAtOnceStatusModal({
   );
 }
 
-function NotificationButton({
+function NotificationButton() {
-  topLevelSelection,
+  const store = useStore();
-}: {
+  const isOpen = useStore((store) => store.application.isNotificationModalOpen);
-  topLevelSelection: ToplevelNavigationItem;
-}) {
   const notifications = useStore((state) => state.notifications);
   const activeNotifications = useMemoize(filterNotifications, [
     notifications.activeNotifications,
     notifications.blocklistedPlugins,
     notifications.blocklistedCategories,
   ]);
-  const dispatch = useDispatch();
   return (
-    <NavbarButton
+    <>
-      icon={BellOutlined}
+      <NavbarButton
-      label="Alerts"
+        icon={BellOutlined}
-      zIndex={AlertsZIndex}
+        label="Alerts"
-      toggled={topLevelSelection === 'notification'}
+        zIndex={AlertsZIndex}
-      count={activeNotifications.length}
+        count={activeNotifications.length}
-      onClick={() => dispatch(setTopLevelSelection('notification'))}
+        onClick={() => {
-    />
+          store.dispatch({type: 'isNotificationModalOpen', payload: true});
+        }}
+      />
+      <Modal
+        visible={isOpen}
+        onCancel={() =>
+          store.dispatch({type: 'isNotificationModalOpen', payload: false})
+        }
+        width="70vw"
+        footer={null}>
+        <div style={{minHeight: '80vh', display: 'flex'}}>
+          <Notification />
+        </div>
+      </Modal>
+    </>
   );
 }
 

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

@@ -25,7 +25,6 @@ import {useStore} from '../utils/useStore';
 import {AppInspect} from './appinspect/AppInspect';
 import PluginContainer from '../PluginContainer';
 import {ContentContainer} from './ContentContainer';
-import {Notification} from './notification/Notification';
 import {showChangelog} from '../chrome/ChangelogSheet';
 import PlatformSelectWizard, {
   hasPlatformWizardBeenDone,
@@ -47,9 +46,6 @@ export function SandyApp() {
   const leftSidebarVisible = useStore(
     (state) => state.application.leftSidebarVisible,
   );
-  const topLevelSelection = useStore(
-    (state) => state.application.topLevelSelection,
-  );
   const staticView = useStore((state) => state.connections.staticView);
 
   useEffect(() => {
@@ -109,13 +105,6 @@ export function SandyApp() {
     }
   }, []);
 
-  const leftMenuContent = !leftSidebarVisible ? null : topLevelSelection ===
-    'appinspect' ? (
-    <AppInspect />
-  ) : topLevelSelection === 'notification' ? (
-    <Notification />
-  ) : null;
-
   return (
     <RootElement>
       <Layout.Bottom>
@@ -128,11 +117,7 @@ export function SandyApp() {
             }}>
             <Layout.Horizontal>
               <_Sidebar width={250} minWidth={220} maxWidth={800} gutter>
-                {leftMenuContent && (
+                {leftSidebarVisible ? <AppInspect /> : null}
-                  <TrackingScope scope={topLevelSelection!}>
-                    {leftMenuContent}
-                  </TrackingScope>
-                )}
               </_Sidebar>
             </Layout.Horizontal>
             <MainContainer>

desktop/flipper-ui-core/src/sandy-chrome/notification/Notification.tsx

@@ -115,6 +115,7 @@ function NotificationEntry({notification}: {notification: PluginNotification}) {
     pluginName,
     iconName,
   } = notification;
+  const store = useStore();
 
   const actions = useMemo(
     () => (
@@ -163,7 +164,13 @@ function NotificationEntry({notification}: {notification: PluginNotification}) {
               ? `${clientName}/${appName}`
               : clientName ?? appName ?? 'Not Connected'}
           </Text>
-          <Button style={{width: 'fit-content'}} size="small" onClick={onOpen}>
+          <Button
+            style={{width: 'fit-content'}}
+            size="small"
+            onClick={() => {
+              onOpen();
+              store.dispatch({type: 'isNotificationModalOpen', payload: false});
+            }}>
             Open {pluginName}
           </Button>
         </>
@@ -307,6 +314,7 @@ export function Notification() {
 export function openNotification(store: Store, noti: PluginNotificationOrig) {
   const client = getClientById(store, noti.client);
   if (client) {
+    store.dispatch({type: 'isNotificationModalOpen', payload: true});
     store.dispatch(
       selectPlugin({
         selectedPlugin: noti.pluginId,
@@ -318,6 +326,7 @@ export function openNotification(store: Store, noti: PluginNotificationOrig) {
   } else {
     const device = getDeviceById(store, noti.client);
     if (device) {
+      store.dispatch({type: 'isNotificationModalOpen', payload: true});
       store.dispatch(
         selectPlugin({
           selectedPlugin: noti.pluginId,