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
2023-08-07 03:54:28 -07:00
parent 08371d3a6b
commit 9cceca6d7e
4 changed files with 44 additions and 88 deletions
--- 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',
 });
--- 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 (
    <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({
-  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 (
-    <NavbarButton
-      icon={BellOutlined}
-      label="Alerts"
-      zIndex={AlertsZIndex}
-      toggled={topLevelSelection === 'notification'}
-      count={activeNotifications.length}
-      onClick={() => dispatch(setTopLevelSelection('notification'))}
-    />
+    <>
+      <NavbarButton
+        icon={BellOutlined}
+        label="Alerts"
+        zIndex={AlertsZIndex}
+        count={activeNotifications.length}
+        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>
+    </>
  );
 }

--- 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' ? (
-    <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 && (
-                  <TrackingScope scope={topLevelSelection!}>
-                    {leftMenuContent}
-                  </TrackingScope>
-                )}
+                {leftSidebarVisible ? <AppInspect /> : null}
              </_Sidebar>
            </Layout.Horizontal>
            <MainContainer>
--- 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'}
          </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,