diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx index a25e4347b..8645cc38e 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx +++ b/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}; diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx index 33716b55c..c2507a499 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx +++ b/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 { 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 = DataTableInput & DataTableBaseProps; export function DataTable( @@ -591,13 +611,23 @@ export function DataTable( const header = ( {props.enableSearchbar && ( - { - tableManager.setSearchExpression(newSearchExpression); - }} - /> + + { + tableManager.setSearchExpression(newSearchExpression); + }} + /> + {props.extraActions} + {contexMenu && ( + + + + )} + )} );