Add context menu

Summary: Doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU/edit#heading=h.pg8svtdjlx7

Reviewed By: LukeDefeo

Differential Revision: D49276995

fbshipit-source-id: 83c1346c6c5869c2608b73b11d40f7f55a7a694b

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx

@@ -12,6 +12,8 @@ import {css} from '@emotion/css';
 import {theme} from '../theme';
 
 const containerStyle = css`
+  flex: 1 0 auto;
+  background-color: ${theme.white};
   display: flex;
   flex-direction: row;
   border-radius: ${theme.borderRadius};

desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx

@@ -43,8 +43,13 @@ import {
 import styled from '@emotion/styled';
 import {theme} from '../theme';
 import {tableContextMenuFactory} from './PowerSearchTableContextMenu';
-import {Menu, Switch, InputRef, Typography} from 'antd';
-import {CoffeeOutlined, SearchOutlined, PushpinFilled} from '@ant-design/icons';
+import {Menu, Switch, InputRef, Typography, Dropdown, Button} from 'antd';
+import {
+  CoffeeOutlined,
+  SearchOutlined,
+  PushpinFilled,
+  MenuOutlined,
+} from '@ant-design/icons';
 import {useAssertStableRef} from '../../utils/useAssertStableRef';
 import {Formatter} from '../DataFormatter';
 import {usePluginInstanceMaybe} from '../../plugin/PluginContext';
@@ -143,6 +148,21 @@ export interface TableRowRenderContext<T = any> {
   onContextMenu?(): React.ReactElement;
 }
 
+const Searchbar = styled(Layout.Horizontal)({
+  backgroundColor: theme.backgroundWash,
+  padding: theme.space.small,
+  '.ant-input-affix-wrapper': {
+    height: 32,
+  },
+  '.ant-btn': {
+    padding: `${theme.space.tiny}px ${theme.space.small}px`,
+    background: 'transparent',
+  },
+  '> .ant-select': {
+    flex: 1,
+  },
+});
+
 export type DataTableProps<T> = DataTableInput<T> & DataTableBaseProps<T>;
 
 export function DataTable<T extends object>(
@@ -591,6 +611,7 @@ export function DataTable<T extends object>(
   const header = (
     <Layout.Container>
       {props.enableSearchbar && (
+        <Searchbar gap>
           <PowerSearch
             config={powerSearchExampleConfig}
             initialSearchExpression={searchExpression}
@@ -598,6 +619,15 @@ export function DataTable<T extends object>(
               tableManager.setSearchExpression(newSearchExpression);
             }}
           />
+          {props.extraActions}
+          {contexMenu && (
+            <Dropdown overlay={contexMenu} placement="bottomRight">
+              <Button type="text" size="small" style={{height: '100%'}}>
+                <MenuOutlined />
+              </Button>
+            </Dropdown>
+          )}
+        </Searchbar>
       )}
     </Layout.Container>
   );