Change NotificationsHub to StaticView

Summary:
- Point the Noitifications to the static view
- Add function to check activeness of static view
- Add `SupportRequestDetails` to type (needed?)

Reviewed By: mweststrate

Differential Revision: D18810149

fbshipit-source-id: a33f61f521f3db0dd2a73e56d99b12d029b46a57

src/App.tsx

@@ -141,7 +141,9 @@ export class App extends React.Component<Props> {
         <FlexRow grow={true}>
           {this.props.leftSidebarVisible && <MainSidebar />}
           {this.props.staticView != null ? (
-            React.createElement(this.props.staticView)
+            React.createElement(this.props.staticView, {
+              logger: this.props.logger,
+            })
           ) : (
             <PluginContainer logger={this.props.logger} />
           )}

src/NotificationsHub.tsx

@@ -330,7 +330,7 @@ class NotificationsTable extends Component<Props & SearchableProps, State> {
   }
 }
 
-const ConnectedNotificationsTable = connect<
+export const ConnectedNotificationsTable = connect<
   StateFromProps,
   DispatchFromProps,
   OwnProps,

src/chrome/MainSidebar.tsx

@@ -37,7 +37,7 @@ import {
   Info,
 } from 'flipper';
 import React, {Component, PureComponent, Fragment} from 'react';
-import NotificationsHub from '../NotificationsHub';
+import NotificationScreen from '../chrome/NotificationScreen';
 import {
   selectPlugin,
   starPlugin,
@@ -286,7 +286,6 @@ class MainSidebar extends PureComponent<Props, State> {
       staticView,
       selectPlugin,
       setStaticView,
-      numNotifications,
       uninitializedClients,
     } = this.props;
     const clients = getAvailableClients(selectedDevice, this.props.clients);
@@ -377,38 +376,10 @@ class MainSidebar extends PureComponent<Props, State> {
             </ListItem>
           )}
         </Plugins>
-        {!GK.get('flipper_disable_notifications') && (
+        {this.renderNotificationsEntry()}
-          <ListItem
-            active={selectedPlugin === 'notifications'}
-            onClick={() =>
-              selectPlugin({
-                selectedPlugin: 'notifications',
-                selectedApp: null,
-                deepLinkPayload: null,
-              })
-            }
-            style={{
-              borderTop: `1px solid ${colors.blackAlpha10}`,
-            }}>
-            <PluginIcon
-              color={colors.light50}
-              name={
-                numNotifications > 0
-                  ? NotificationsHub.icon || 'bell'
-                  : 'bell-null'
-              }
-              isActive={selectedPlugin === NotificationsHub.id}
-            />
-            <PluginName
-              count={numNotifications}
-              isActive={selectedPlugin === NotificationsHub.id}>
-              {NotificationsHub.title}
-            </PluginName>
-          </ListItem>
-        )}
         {this.state.showSupportForm &&
           (function() {
-            const active = staticView && staticView === SupportRequestFormV2;
+            const active = isStaticViewActive(staticView, SupportRequestFormV2);
             return (
               <ListItem
                 active={active}
@@ -441,6 +412,10 @@ class MainSidebar extends PureComponent<Props, State> {
       return null;
     }
     const {staticView, setStaticView} = this.props;
+    const supportRequestDetailsactive = isStaticViewActive(
+      staticView,
+      SupportRequestDetails,
+    );
     return (
       <>
         <ListItem>
@@ -451,21 +426,14 @@ class MainSidebar extends PureComponent<Props, State> {
         {this.state.showSupportForm &&
           (selectedDevice as ArchivedDevice).supportRequestDetails && (
             <ListItem
-              active={
+              active={supportRequestDetailsactive}
-                staticView != null && staticView === SupportRequestDetails
-              }
               onClick={() => setStaticView(SupportRequestDetails)}>
               <PluginIcon
                 color={colors.light50}
                 name={'app-dailies'}
-                isActive={
+                isActive={supportRequestDetailsactive}
-                  staticView != null && staticView === SupportRequestDetails
-                }
               />
-              <PluginName
+              <PluginName isActive={supportRequestDetailsactive}>
-                isActive={
-                  staticView != null && staticView === SupportRequestDetails
-                }>
                 Support Request Details
               </PluginName>
             </ListItem>
@@ -593,6 +561,41 @@ class MainSidebar extends PureComponent<Props, State> {
       </>
     );
   }
+
+  renderNotificationsEntry() {
+    if (GK.get('flipper_disable_notifications')) {
+      return null;
+    }
+
+    const active = isStaticViewActive(
+      this.props.staticView,
+      NotificationScreen,
+    );
+    return (
+      <ListItem
+        active={active}
+        onClick={() => this.props.setStaticView(NotificationScreen)}
+        style={{
+          borderTop: `1px solid ${colors.blackAlpha10}`,
+        }}>
+        <PluginIcon
+          color={colors.light50}
+          name={this.props.numNotifications > 0 ? 'bell' : 'bell-null'}
+          isActive={active}
+        />
+        <PluginName count={this.props.numNotifications} isActive={active}>
+          Notifications
+        </PluginName>
+      </ListItem>
+    );
+  }
+}
+
+function isStaticViewActive(
+  current: StaticView,
+  selected: StaticView,
+): boolean {
+  return current && selected && current === selected;
 }
 
 function getFavoritePlugins(

src/chrome/NotificationScreen.tsx

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {PureComponent, Fragment} from 'react';
+import {Logger} from '../fb-interfaces/Logger';
+import {connect} from 'react-redux';
+import {State as Store} from '../reducers/index';
+import {ConnectedNotificationsTable} from '../NotificationsHub';
+import {Button, colors, styled, FlexColumn} from '../ui';
+import {clearAllNotifications} from '../reducers/notifications';
+import {selectPlugin} from '../reducers/connections';
+import React from 'react';
+
+type StateFromProps = {
+  deepLinkPayload: string | null;
+  blacklistedPlugins: Array<string>;
+  blacklistedCategories: Array<string>;
+};
+
+type DispatchFromProps = {
+  clearAllNotifications: () => void;
+  selectPlugin: (payload: {
+    selectedPlugin: string | null;
+    selectedApp: string | null | undefined;
+    deepLinkPayload: string | null;
+  }) => any;
+};
+
+type OwnProps = {
+  logger: Logger;
+};
+
+type Props = StateFromProps & DispatchFromProps & OwnProps;
+
+type State = {};
+
+const Container = styled(FlexColumn)({
+  width: 0,
+  flexGrow: 1,
+  flexShrink: 1,
+  backgroundColor: colors.white,
+});
+
+class Notifications extends PureComponent<Props, State> {
+  render() {
+    const {
+      blacklistedPlugins,
+      blacklistedCategories,
+      deepLinkPayload,
+      logger,
+      clearAllNotifications,
+      selectPlugin,
+    } = this.props;
+    return (
+      <React.Fragment>
+        <Container>
+          <ConnectedNotificationsTable
+            onClear={clearAllNotifications}
+            selectedID={deepLinkPayload}
+            onSelectPlugin={selectPlugin}
+            logger={logger}
+            defaultFilters={[
+              ...blacklistedPlugins.map(value => ({
+                value,
+                type: 'exclude',
+                key: 'plugin',
+              })),
+              ...blacklistedCategories.map(value => ({
+                value,
+                type: 'exclude',
+                key: 'category',
+              })),
+            ]}
+            actions={
+              <Fragment>
+                <Button onClick={clearAllNotifications}>Clear</Button>
+              </Fragment>
+            }
+          />
+        </Container>
+      </React.Fragment>
+    );
+  }
+}
+
+export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
+  ({
+    connections: {deepLinkPayload},
+    notifications: {blacklistedPlugins, blacklistedCategories},
+  }) => ({
+    deepLinkPayload,
+    blacklistedPlugins,
+    blacklistedCategories,
+  }),
+  {clearAllNotifications, selectPlugin},
+)(Notifications);

src/reducers/connections.tsx

@@ -19,14 +19,18 @@ import {Actions} from '.';
 const WelcomeScreen = isHeadless()
   ? require('../chrome/WelcomeScreenHeadless').default
   : require('../chrome/WelcomeScreen').default;
+import NotificationScreen from '../chrome/NotificationScreen';
 import SupportRequestForm from '../fb-stubs/SupportRequestFormManager';
 import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
+import SupportRequestDetails from '../fb-stubs/SupportRequestDetails';
 
 export type StaticView =
   | null
   | typeof WelcomeScreen
+  | typeof NotificationScreen
   | typeof SupportRequestForm
-  | typeof SupportRequestFormV2;
+  | typeof SupportRequestFormV2
+  | typeof SupportRequestDetails;
 
 export type FlipperError = {
   occurrences?: number;
@@ -155,8 +159,6 @@ const INITAL_STATE: State = {
   deepLinkPayload: null,
   staticView: WelcomeScreen,
 };
-// Please sync with NotificationsHub
-const STATIC_PLUGINS_ID: Array<string> = ['notifications'];
 
 const reducer = (state: State = INITAL_STATE, action: Actions): State => {
   switch (action.type) {
@@ -560,7 +562,6 @@ function updateSelection(state: Readonly<State>): State {
   const availablePlugins: string[] = [
     ...(device?.devicePlugins || []),
     ...(client?.plugins || []),
-    ...STATIC_PLUGINS_ID,
   ];
 
   if (