Introduce pause button

Summary: ..and some earlier reviews comments has been processed + some fine tuning on the ui

Reviewed By: priteshrnandgaonkar

Differential Revision: D26816559

fbshipit-source-id: adf2586763be185ee8e7cc22b2827ecefe4e4cab

desktop/flipper-plugin/src/ui/datatable/ColumnFilter.tsx

@@ -8,12 +8,13 @@
  */
 
 import {useMemo, useState} from 'react';
+import styled from '@emotion/styled';
 import React from 'react';
-import {theme} from '../theme';
-import type {DataTableColumn} from './DataTable';
-
 import {Button, Checkbox, Dropdown, Menu, Typography, Input} from 'antd';
 import {FilterFilled, MinusCircleOutlined} from '@ant-design/icons';
+
+import {theme} from '../theme';
+import type {DataTableColumn} from './DataTable';
 import {Layout} from '../Layout';
 
 const {Text} = Typography;
@@ -127,18 +128,25 @@ export function FilterIcon({
   );
 
   return (
-    <Dropdown overlay={menu} trigger={['click']}>
-      <Button
-        size="small"
-        type="text"
-        style={{
-          backgroundColor: theme.backgroundWash,
-          borderRadius: 0,
-          visibility: isActive ? 'visible' : 'hidden',
-          color: isActive ? theme.primaryColor : theme.disabledColor,
-        }}>
-        <FilterFilled />
-      </Button>
-    </Dropdown>
+    <div>
+      <Dropdown overlay={menu} trigger={['click']}>
+        <FilterButton isActive={isActive}>
+          <FilterFilled />
+        </FilterButton>
+      </Dropdown>
+    </div>
   );
 }
+
+export const FilterButton = styled.div<{isActive?: boolean}>(({isActive}) => ({
+  backgroundColor: theme.backgroundWash,
+  visibility: isActive ? 'visible' : 'hidden',
+  color: isActive ? theme.primaryColor : theme.disabledColor,
+  cursor: 'pointer',
+  marginRight: 4,
+  zIndex: 1,
+  '&:hover': {
+    color: theme.primaryColor,
+    backgroundColor: theme.backgroundWash,
+  },
+}));

desktop/flipper-plugin/src/ui/datatable/TableHead.tsx

@@ -24,7 +24,7 @@ import {Typography} from 'antd';
 import {CaretDownFilled, CaretUpFilled} from '@ant-design/icons';
 import {Layout} from '../Layout';
 import {Sorting, OnColumnResize, SortDirection} from './useDataTableManager';
-import {ColumnFilterHandlers, FilterIcon} from './ColumnFilter';
+import {ColumnFilterHandlers, FilterButton, FilterIcon} from './ColumnFilter';
 
 const {Text} = Typography;
 
@@ -98,8 +98,8 @@ const TableHeadColumnContainer = styled.div<{
   [`:hover ${SortIconsContainer}`]: {
     visibility: 'visible',
   },
-  [`&:hover button`]: {
-    visibility: 'visible !important' as any,
+  [`&:hover ${FilterButton}`]: {
+    visibility: 'visible',
   },
 }));
 TableHeadColumnContainer.displayName = 'TableHead:TableHeadColumnContainer';
@@ -166,10 +166,13 @@ function TableHeadColumn({
       <div
         onClick={(e) => {
           e.stopPropagation();
-          onSort(
-            column.key,
-            sorted === 'asc' ? 'desc' : sorted === 'desc' ? undefined : 'asc',
-          );
+          const newDirection =
+            sorted === undefined
+              ? 'asc'
+              : sorted === 'asc'
+              ? 'desc'
+              : undefined;
+          onSort(column.key, newDirection);
         }}
         role="button"
         tabIndex={0}>

desktop/flipper-plugin/src/ui/datatable/TableSearch.tsx

@@ -9,9 +9,13 @@
 
 import {MenuOutlined} from '@ant-design/icons';
 import {Button, Dropdown, Input} from 'antd';
-import React, {memo} from 'react';
+import React, {memo, useState} from 'react';
+import styled from '@emotion/styled';
+
 import {Layout} from '../Layout';
 import {theme} from '../theme';
+import {debounce} from 'lodash';
+import {useAssertStableRef} from '../../utils/useAssertStableRef';
 
 export const TableSearch = memo(function TableSearch({
   onSearch,
@@ -23,14 +27,23 @@ export const TableSearch = memo(function TableSearch({
   hasSelection?: boolean;
   contextMenu?: React.ReactElement;
 }) {
+  useAssertStableRef(onSearch, 'onSearch');
+  const [search, setSearch] = useState('');
+  const [performSearch] = useState(() =>
+    debounce(onSearch, 200, {leading: true}),
+  );
   return (
-    <Layout.Horizontal
-      gap
-      style={{
-        backgroundColor: theme.backgroundWash,
-        padding: theme.space.small,
-      }}>
-      <Input.Search allowClear placeholder="Search..." onSearch={onSearch} />
+    <Searchbar gap>
+      <Input.Search
+        allowClear
+        placeholder="Search..."
+        onSearch={performSearch}
+        value={search}
+        onChange={(e) => {
+          setSearch(e.target.value);
+          performSearch(e.target.value);
+        }}
+      />
       {extraActions}
       {contextMenu && (
         <Dropdown overlay={contextMenu} placement="bottomRight">
@@ -39,6 +52,15 @@ export const TableSearch = memo(function TableSearch({
           </Button>
         </Dropdown>
       )}
-    </Layout.Horizontal>
+    </Searchbar>
   );
 });
+
+const Searchbar = styled(Layout.Horizontal)({
+  backgroundColor: theme.backgroundWash,
+  padding: theme.space.small,
+  '.ant-btn': {
+    padding: `${theme.space.tiny}px ${theme.space.small}px`,
+    background: 'transparent',
+  },
+});