Add Action Functionality

Summary: This diffs add removing all action and simple search (search by matching title and/or detail)

Reviewed By: mweststrate

Differential Revision: D24992828

fbshipit-source-id: 84e59e8de5a6cfd4c6cb4097350dbb87e17271db

desktop/app/src/sandy-chrome/notification/Notification.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {Layout, theme} from 'flipper-plugin';
 import {styled, Glyph} from '../../ui';
 import {Input, Typography, Button, Collapse} from 'antd';
@@ -25,6 +25,7 @@ import {useStore, useDispatch} from '../../utils/useStore';
 import {ClientQuery} from '../../Client';
 import {deconstructClientId} from '../../utils/clientUtils';
 import {selectPlugin} from '../../reducers/connections';
+import {clearAllNotifications} from '../../reducers/notifications';
 
 type NotificationExtra = {
   onOpen: () => void;
@@ -148,6 +149,8 @@ function NotificationList({
 export function Notification() {
   const dispatch = useDispatch();
 
+  const [searchString, setSearchString] = useState('');
+
   const clients = useStore((state) => state.connections.clients);
   const getClientQuery = useCallback(
     (id: string | null) =>
@@ -174,7 +177,19 @@ export function Notification() {
 
   const displayedNotifications: Array<PluginNotification> = useMemo(
     () =>
-      activeNotifications.map((noti) => {
+      activeNotifications
+        .filter(
+          (noti) =>
+            noti.notification.title
+              .toLocaleLowerCase()
+              .includes(searchString.toLocaleLowerCase()) ||
+            (typeof noti.notification.message === 'string'
+              ? noti.notification.message
+                  .toLocaleLowerCase()
+                  .includes(searchString.toLocaleLowerCase())
+              : false),
+        )
+        .map((noti) => {
           const plugin = getPlugin(noti.pluginId);
           const client = getClientQuery(noti.client);
           return {
@@ -193,14 +208,19 @@ export function Notification() {
             iconName: plugin?.icon,
           };
         }),
-    [activeNotifications, getPlugin, getClientQuery, dispatch],
+    [activeNotifications, getPlugin, getClientQuery, searchString, dispatch],
   );
 
   const actions = (
     <div>
-      <Layout.Horizontal gap="medium">
+      <Layout.Horizontal>
-        <SettingOutlined style={{fontSize: theme.space.large}} />
+        <Button type="text" size="small" icon={<SettingOutlined />} />
-        <DeleteOutlined style={{fontSize: theme.space.large}} />
+        <Button
+          type="text"
+          size="small"
+          icon={<DeleteOutlined />}
+          onClick={() => dispatch(clearAllNotifications())}
+        />
       </Layout.Horizontal>
     </div>
   );
@@ -210,7 +230,12 @@ export function Notification() {
         <Layout.Container gap="tiny" padv="tiny" borderBottom>
           <SidebarTitle actions={actions}>notifications</SidebarTitle>
           <Layout.Container padh="medium" padv="small">
-            <Input placeholder="Search..." prefix={<SearchOutlined />} />
+            <Input
+              placeholder="Search..."
+              prefix={<SearchOutlined />}
+              value={searchString}
+              onChange={(e) => setSearchString(e.target.value)}
+            />
           </Layout.Container>
         </Layout.Container>
         <NotificationList notifications={displayedNotifications} />