Introduce column filters

Summary:
Beyond a search across all columns, it is now possible to specific columns for specific values:

* for a row to be visible, all active column filters need to be matched (e.g. both a filter on time and app has to be satisfied)
* if multiple values within a column are filtered for, these are -or-ed.
* if no value at all within a column is checked, even when they are defined, the column won't take part in filtering
* if there is a general search and column filters, a row has to satisfy both

Filters can be preconfigured, pre-configured filters cannot be removed.

Reseting will reset the filters back to their original

Move `useMemoize` to flipper-plugin

Merged the `ui/utils` and `utils` folder inside `flipper-plugin`

Reviewed By: nikoant

Differential Revision: D26450260

fbshipit-source-id: 11693d5d140cea03cad91c1e0f3438d7b129cf29

desktop/app/src/sandy-chrome/DesignComponentDemos.tsx

@@ -225,6 +225,11 @@ const demos: PreviewProps[] = [
         'boolean (false)',
         'If set, all children will use their own height, and they will be centered vertically in the layout. If not set, all children will be stretched to the height of the layout.',
       ],
+      [
+        'gap',
+        'true / number (0)',
+        'Set the spacing between children. If just set, theme.space.small will be used.',
+      ],
     ],
     demos: {
       'Layout.Top': (

desktop/app/src/sandy-chrome/LeftRail.tsx

@@ -53,7 +53,7 @@ import {getInstance} from '../fb-stubs/Logger';
 import {getUser} from '../fb-stubs/user';
 import {SandyRatingButton} from '../chrome/RatingButton';
 import {filterNotifications} from './notification/notificationUtils';
-import {useMemoize} from '../utils/useMemoize';
+import {useMemoize} from 'flipper-plugin';
 import isProduction from '../utils/isProduction';
 import NetworkGraph from '../chrome/NetworkGraph';
 import FpsGraph from '../chrome/FpsGraph';

desktop/app/src/sandy-chrome/appinspect/AppInspect.tsx

@@ -11,14 +11,13 @@ import React from 'react';
 import {Typography} from 'antd';
 import {LeftSidebar, SidebarTitle, InfoIcon} from '../LeftSidebar';
 import {Layout, Link, styled} from '../../ui';
-import {theme, useValue} from 'flipper-plugin';
+import {theme, useValue, useMemoize} from 'flipper-plugin';
 import {AppSelector} from './AppSelector';
 import {useStore} from '../../utils/useStore';
 import {PluginList} from './PluginList';
 import ScreenCaptureButtons from '../../chrome/ScreenCaptureButtons';
 import MetroButton from '../../chrome/MetroButton';
 import {BookmarkSection} from './BookmarkSection';
-import {useMemoize} from '../../utils/useMemoize';
 import Client from '../../Client';
 import {State} from '../../reducers';
 import BaseDevice from '../../devices/BaseDevice';

desktop/app/src/sandy-chrome/appinspect/BookmarkSection.tsx

@@ -22,7 +22,7 @@ import {State} from '../../reducers';
 
 // eslint-disable-next-line flipper/no-relative-imports-across-packages
 import type {NavigationPlugin} from '../../../../plugins/navigation/index';
-import {useMemoize} from '../../utils/useMemoize';
+import {useMemoize} from 'flipper-plugin';
 import styled from '@emotion/styled';
 
 const {Text} = Typography;

desktop/app/src/sandy-chrome/appinspect/PluginList.tsx

@@ -18,7 +18,7 @@ import {
   DownloadOutlined,
 } from '@ant-design/icons';
 import {Glyph, Layout, styled} from '../../ui';
-import {theme, NUX, Tracked, useValue} from 'flipper-plugin';
+import {theme, NUX, Tracked, useValue, useMemoize} from 'flipper-plugin';
 import {useDispatch, useStore} from '../../utils/useStore';
 import {
   computePluginLists,
@@ -29,7 +29,6 @@ import {selectPlugin} from '../../reducers/connections';
 import Client from '../../Client';
 import BaseDevice from '../../devices/BaseDevice';
 import {DownloadablePluginDetails} from 'flipper-plugin-lib';
-import {useMemoize} from '../../utils/useMemoize';
 import MetroDevice from '../../devices/MetroDevice';
 import {
   DownloadablePluginState,

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

@@ -31,7 +31,7 @@ import {
   updatePluginBlocklist,
 } from '../../reducers/notifications';
 import {filterNotifications} from './notificationUtils';
-import {useMemoize} from '../../utils/useMemoize';
+import {useMemoize} from 'flipper-plugin';
 import BlocklistSettingButton from './BlocklistSettingButton';
 
 type NotificationExtra = {

desktop/app/src/utils/useMemoize.tsx

@@ -1,25 +0,0 @@
-/**
- * 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 {useMemo} from 'react';
-
-/**
- * Slight variation on useMemo that encourages to create hoistable memoization functions,
- * which encourages reuse and testability by no longer closing over things in the memoization function.
- *
- * @example
- * const metroDevice = useMemoize(
- *   findMetroDevice,
- *   [connections.devices],
- * );
- */
-export function useMemoize<T extends any[], R>(fn: (...args: T) => R, args: T) {
-  // eslint-disable-next-line
-  return useMemo(() => fn.apply(null, args), args);
-}