diff --git a/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx index 7909720ec..c2c9cce3f 100644 --- a/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx +++ b/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx @@ -84,7 +84,7 @@ export function MasterDetailWithPowerSearch({ sidebarPosition, sidebarSize, onSelect, - extraActions, + actionsTop, enableMenuEntries, enableClear, isPaused, @@ -206,11 +206,13 @@ export function MasterDetailWithPowerSearch({ records={records!} tableManagerRef={tableManagerRef} onSelect={handleSelect} - extraActions={ + actionsRight={ <> {connected && isPaused && ( )} {connected && enableClear && ( - )} - {extraActions} } + actionsTop={actionsTop} /> ); diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx index 0c1c28c44..1403784ff 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx @@ -85,7 +85,8 @@ type DataTableBaseProps = { enableMultiPanels?: boolean; // if set (the default) will grow and become scrollable. Otherwise will use natural size scrollable?: boolean; - extraActions?: React.ReactElement; + actionsRight?: React.ReactElement; + actionsTop?: React.ReactElement; onSelect?(record: T | undefined, records: T[]): void; onRowStyle?(record: T): CSSProperties | undefined; tableManagerRef?: RefObject | undefined>; // Actually we want a MutableRefObject, but that is not what React.createRef() returns, and we don't want to put the burden on the plugin dev to cast it... @@ -631,6 +632,7 @@ export function DataTable( const header = ( + {props.actionsTop ? {props.actionsTop} : null} {props.enableSearchbar && ( ( )} + {props.actionsRight} )} ); - const footer = props.extraActions ? ( - - {props.extraActions} - - ) : null; const columnHeaders = ( {props.enableColumnHeaders && ( @@ -734,7 +732,7 @@ export function DataTable( ); } - let mainPanel = ( + const mainPanel = ( {mainSection} {props.enableAutoScroll && ( @@ -752,14 +750,6 @@ export function DataTable( {range && !isUnitTest && {range}} ); - if (footer) { - mainPanel = ( - - {mainPanel} - {footer} - - ); - } return props.enableMultiPanels && tableState.sideBySide ? ( //TODO: Make the panels resizable by having a dynamic maxWidth for Layout.Right/Left possibly?