diff --git a/desktop/flipper-ui-core/src/reducers/application.tsx b/desktop/flipper-ui-core/src/reducers/application.tsx index 6e2f6d460..5c480ffaa 100644 --- a/desktop/flipper-ui-core/src/reducers/application.tsx +++ b/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', }); diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx index 420db18bd..df30c2444 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx +++ b/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 ( - { - dispatch(setTopLevelSelection('appinspect')); - if (selectedPlugin) { - dispatch( - selectPlugin({ - selectedPlugin, - selectedAppId, - selectedDevice: selectedDevice, - }), - ); - } else { - dispatch(setStaticView(WelcomeScreenStaticView)); - } - }} - /> @@ -133,7 +101,7 @@ export const Navbar = withTrackingScope(function Navbar() { - + @@ -243,27 +211,38 @@ function ExportEverythingEverywhereAllAtOnceStatusModal({ ); } -function NotificationButton({ - topLevelSelection, -}: { - topLevelSelection: ToplevelNavigationItem; -}) { +function NotificationButton() { + const store = useStore(); + const isOpen = useStore((store) => store.application.isNotificationModalOpen); const notifications = useStore((state) => state.notifications); const activeNotifications = useMemoize(filterNotifications, [ notifications.activeNotifications, notifications.blocklistedPlugins, notifications.blocklistedCategories, ]); - const dispatch = useDispatch(); return ( - dispatch(setTopLevelSelection('notification'))} - /> + <> + { + store.dispatch({type: 'isNotificationModalOpen', payload: true}); + }} + /> + + store.dispatch({type: 'isNotificationModalOpen', payload: false}) + } + width="70vw" + footer={null}> +
+ +
+
+ ); } diff --git a/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx b/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx index 1cc7256bd..543f738d6 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx +++ b/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' ? ( - - ) : topLevelSelection === 'notification' ? ( - - ) : null; - return ( @@ -128,11 +117,7 @@ export function SandyApp() { }}> <_Sidebar width={250} minWidth={220} maxWidth={800} gutter> - {leftMenuContent && ( - - {leftMenuContent} - - )} + {leftSidebarVisible ? : null} diff --git a/desktop/flipper-ui-core/src/sandy-chrome/notification/Notification.tsx b/desktop/flipper-ui-core/src/sandy-chrome/notification/Notification.tsx index 3454fc8f1..f7b4493cf 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/notification/Notification.tsx +++ b/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'} - @@ -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,