From a37b04737c69914c38a0288cdfd905a61648b7d2 Mon Sep 17 00:00:00 2001
From: Anton Kastritskiy <antonk52@meta.com>
Date: Fri, 22 Sep 2023 08:25:24 -0700
Subject: [PATCH] Move default actions and extra actions next to the search

Summary: Having default and extra actions at the bottom is not actionable. Users are used to haveing table controls on the top.

Reviewed By: LukeDefeo, aigoncharov

Differential Revision: D49538205

fbshipit-source-id: 724a31dc44de79cb0e09efae48dd2135450b34ae
---
 .../src/ui/MasterDetailWithPowerSearch.tsx    | 15 ++++++++++----
 .../data-table/DataTableWithPowerSearch.tsx   | 20 +++++--------------
 2 files changed, 16 insertions(+), 19 deletions(-)

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<T extends object>({
   sidebarPosition,
   sidebarSize,
   onSelect,
-  extraActions,
+  actionsTop,
   enableMenuEntries,
   enableClear,
   isPaused,
@@ -206,11 +206,13 @@ export function MasterDetailWithPowerSearch<T extends object>({
       records={records!}
       tableManagerRef={tableManagerRef}
       onSelect={handleSelect}
-      extraActions={
+      actionsRight={
         <>
           {connected && isPaused && (
             <Button
               size="small"
+              type="text"
+              style={{height: '100%'}}
               title={`Click to ${pausedState ? 'resume' : 'pause'} the stream`}
               danger={pausedState}
               onClick={handleTogglePause}>
@@ -218,13 +220,18 @@ export function MasterDetailWithPowerSearch<T extends object>({
             </Button>
           )}
           {connected && enableClear && (
-            <Button size="small" title="Clear records" onClick={handleClear}>
+            <Button
+              size="small"
+              type="text"
+              title="Clear records"
+              onClick={handleClear}
+              style={{height: '100%'}}>
               <DeleteOutlined />
             </Button>
           )}
-          {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<T = any> = {
   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<DataTableManager<T> | 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<T extends object>(
 
   const header = (
     <Layout.Container>
+      {props.actionsTop ? <Searchbar gap>{props.actionsTop}</Searchbar> : null}
       {props.enableSearchbar && (
         <Searchbar gap>
           <PowerSearch
@@ -647,15 +649,11 @@ export function DataTable<T extends object>(
               </Button>
             </Dropdown>
           )}
+          {props.actionsRight}
         </Searchbar>
       )}
     </Layout.Container>
   );
-  const footer = props.extraActions ? (
-    <Layout.Container>
-      <Searchbar gap>{props.extraActions}</Searchbar>
-    </Layout.Container>
-  ) : null;
   const columnHeaders = (
     <Layout.Container>
       {props.enableColumnHeaders && (
@@ -734,7 +732,7 @@ export function DataTable<T extends object>(
       </Layout.Container>
     );
   }
-  let mainPanel = (
+  const mainPanel = (
     <Layout.Container grow={props.scrollable} style={{position: 'relative'}}>
       {mainSection}
       {props.enableAutoScroll && (
@@ -752,14 +750,6 @@ 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%'}}>