Change layout for power search enabled data table

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

Reviewed By: antonk52

Differential Revision: D49411939

fbshipit-source-id: 0ca8b69ac7eaad1ece88caa5a220203fe54ad946

desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx

@@ -210,6 +210,7 @@ export function MasterDetailWithPowerSearch<T extends object>({
         <>
           {connected && isPaused && (
             <Button
+              size="small"
               title={`Click to ${pausedState ? 'resume' : 'pause'} the stream`}
               danger={pausedState}
               onClick={handleTogglePause}>
@@ -217,7 +218,7 @@ export function MasterDetailWithPowerSearch<T extends object>({
             </Button>
           )}
           {connected && enableClear && (
-            <Button title="Clear records" onClick={handleClear}>
+            <Button size="small" title="Clear records" onClick={handleClear}>
               <DeleteOutlined />
             </Button>
           )}

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

@@ -640,7 +640,6 @@ 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%'}}>
@@ -652,6 +651,11 @@ export function DataTable<T extends object>(
       )}
     </Layout.Container>
   );
+  const footer = props.extraActions ? (
+    <Layout.Container>
+      <Searchbar gap>{props.extraActions}</Searchbar>
+    </Layout.Container>
+  ) : null;
   const columnHeaders = (
     <Layout.Container>
       {props.enableColumnHeaders && (
@@ -730,7 +734,7 @@ export function DataTable<T extends object>(
       </Layout.Container>
     );
   }
-  const mainPanel = (
+  let mainPanel = (
     <Layout.Container grow={props.scrollable} style={{position: 'relative'}}>
       {mainSection}
       {props.enableAutoScroll && (
@@ -748,6 +752,14 @@ export function DataTable<T extends object>(
       {range && !isUnitTest && <RangeFinder>{range}</RangeFinder>}
     </Layout.Container>
   );
+  if (footer) {
+    mainPanel = (
+      <Layout.Bottom>
+        {mainPanel}
+        {footer}
+      </Layout.Bottom>
+    );
+  }
   return props.enableMultiPanels && tableState.sideBySide ? (
     //TODO: Make the panels resizable by having a dynamic maxWidth for Layout.Right/Left possibly?
     <Layout.Horizontal style={{height: '100%'}}>