From 1163769b838fa59f5b996d23cf29559f2974b3f8 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Tue, 19 Sep 2023 08:19:25 -0700
Subject: [PATCH] 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
---
 .../src/ui/MasterDetailWithPowerSearch.tsx       |  3 ++-
 .../ui/data-table/DataTableWithPowerSearch.tsx   | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx
index 0bbd3e8ff..7909720ec 100644
--- a/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx
+++ b/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>
           )}
diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
index 9b7624a8e..0c1c28c44 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
+++ b/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%'}}>