move NotificationHub from plugins to main folder

Summary: As all device plugins are now moved to the plugins folder, this was the last thing in this folder. I am moving it out and putting it next to the core UI parts of the app.

Reviewed By: jknoxville

Differential Revision: D10337838

fbshipit-source-id: 6fa699c28e5df8a53719179fbb760f2a140bafc4

src/NotificationsHub.js

@@ -6,8 +6,8 @@
  */
 
 import type {SearchableProps, FlipperBasePlugin, Device} from 'flipper';
-import type {PluginNotification} from '../../reducers/notifications';
-import {selectPlugin} from '../../reducers/connections';
+import type {PluginNotification} from './reducers/notifications';
+import {selectPlugin} from './reducers/connections';
 
 import {
   FlipperDevicePlugin,
@@ -23,14 +23,14 @@ import {
 } from 'flipper';
 import {connect} from 'react-redux';
 import React, {Component, Fragment} from 'react';
-import plugins from '../../plugins/index';
+import plugins from './plugins/index';
 import {clipboard} from 'electron';
 import PropTypes from 'prop-types';
 import {
   clearAllNotifications,
   updatePluginBlacklist,
-} from '../../reducers/notifications';
-import {createPaste, textContent} from '../../utils/index';
+} from './reducers/notifications';
+import {createPaste, textContent} from './utils/index';
 
 export default class Notifications extends FlipperDevicePlugin<{}> {
   static id = 'notifications';

src/PluginContainer.js

@@ -25,6 +25,7 @@ import {connect} from 'react-redux';
 import {setPluginState} from './reducers/pluginStates.js';
 import {setActiveNotifications} from './reducers/notifications.js';
 import {devicePlugins, clientPlugins} from './plugins/index.js';
+import NotificationsHub from './NotificationsHub';
 import {activateMenuItems} from './MenuBar.js';
 
 const Container = styled(FlexColumn)({
@@ -68,7 +69,7 @@ type State = {
 
 function computeState(props: Props): State {
   // plugin changed
-  let activePlugin = devicePlugins.find(
+  let activePlugin = [NotificationsHub, ...devicePlugins].find(
     (p: Class<FlipperDevicePlugin<>>) => p.id === props.selectedPlugin,
   );
   let target = props.selectedDevice;

src/chrome/MainSidebar.js

@@ -25,14 +25,10 @@ import {
 } from 'flipper';
 import React from 'react';
 import {devicePlugins, clientPlugins} from '../plugins/index.js';
-import notificationPlugin from '../device-plugins/notifications/index.js';
+import NotificationsHub from '../NotificationsHub.js';
 import {selectPlugin} from '../reducers/connections.js';
 import {connect} from 'react-redux';
 
-if (GK.get('flipper_notifications')) {
-  devicePlugins.push(notificationPlugin);
-}
-
 const ListItem = styled('div')(({active}) => ({
   paddingLeft: 10,
   display: 'flex',
@@ -214,13 +210,15 @@ class MainSidebar extends Component<MainSidebarProps> {
             }>
             <PluginIcon
               color={colors.light50}
-              name={notifications.length > 0 ? 'bell' : 'bell-null'}
-              isActive={selectedPlugin === 'notifications'}
+              name={
+                notifications.length > 0 ? NotificationsHub.icon : 'bell-null'
+              }
+              isActive={selectedPlugin === NotificationsHub.id}
             />
             <PluginName
               count={notifications.length}
-              isActive={selectedPlugin === 'notifications'}>
-              Notifications
+              isActive={selectedPlugin === NotificationsHub.id}>
+              {NotificationsHub.title}
             </PluginName>
           </ListItem>
         )}