From 5cb4c0d2cabc5409698bf9cb04d1d91ba8d4ea76 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Thu, 18 Apr 2024 07:15:54 -0700
Subject: [PATCH] Power search polish

Summary:
sorry this ended up becoming a number of changes

1. Give power search min height so size doesnt change when empty vs not empty
2. Align search bar and items better by using flex start instead of base line
3. Use consistent style for buttons on the right (antd button ghost)

Reviewed By: lblasa

Differential Revision: D56191805

fbshipit-source-id: 8ba3022dfeb0f4f6be501096c48efba707821378
---
 .../src/ui/MasterDetailWithPowerSearch.tsx    | 31 +++++++++----------
 .../ui/PowerSearch/PowerSearchContainer.tsx   |  2 +-
 .../data-table/DataTableWithPowerSearch.tsx   |  4 +--
 desktop/plugins/public/logs/index.tsx         |  3 +-
 desktop/plugins/public/network/index.tsx      |  9 ++++--
 .../components/FrameworkEventsTable.tsx       |  2 ++
 6 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx
index 6bdd9f164c5..7865e981670 100644
--- a/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx
+++ b/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx
@@ -27,7 +27,7 @@ import {
   PauseCircleOutlined,
   PlayCircleOutlined,
 } from '@ant-design/icons';
-import {Button} from 'antd';
+import {Button, Tooltip} from 'antd';
 import {usePluginInstance} from '../plugin/PluginContext';
 import {useAssertStableRef} from '../utils/useAssertStableRef';
 import {Atom, createState, useValue} from '../state/atom';
@@ -213,23 +213,22 @@ export function MasterDetailWithPowerSearch<T extends object>({
       actionsRight={
         <>
           {connected && isPaused && (
-            <Button
-              size="small"
-              type="text"
-              title={`Click to ${pausedState ? 'resume' : 'pause'} the stream`}
-              danger={pausedState}
-              onClick={handleTogglePause}>
-              {pausedState ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
-            </Button>
+            <Tooltip
+              title={`Click to ${pausedState ? 'resume' : 'pause'} the stream`}>
+              <Button
+                type="ghost"
+                danger={pausedState}
+                onClick={handleTogglePause}>
+                {pausedState ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
+              </Button>
+            </Tooltip>
           )}
           {connected && enableClear && (
-            <Button
-              size="small"
-              type="text"
-              title="Clear records"
-              onClick={handleClear}>
-              <DeleteOutlined />
-            </Button>
+            <Tooltip title="Clear records">
+              <Button type="ghost" onClick={handleClear}>
+                <DeleteOutlined />
+              </Button>
+            </Tooltip>
           )}
         </>
       }
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
index ec0c6df1e6f..9785e413f32 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
@@ -22,7 +22,7 @@ const containerStyle = css`
   border: 1px solid ${theme.borderColor};
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   padding: ${theme.space.tiny / 2}px;
-
+  min-height: 34px;
   &:focus-within,
   &:hover {
     border-color: ${theme.primaryColor};
diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
index 557ad20f278..bf15dbfbbcd 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
@@ -923,7 +923,7 @@ export function DataTable<T extends object>(
     <Layout.Container>
       {props.actionsTop ? <Searchbar gap>{props.actionsTop}</Searchbar> : null}
       {props.enableSearchbar && (
-        <Searchbar grow shrink gap style={{alignItems: 'baseline'}}>
+        <Searchbar grow shrink gap style={{alignItems: 'flex-start'}}>
           <PowerSearch
             config={powerSearchConfig}
             searchExpression={searchExpression}
@@ -943,7 +943,7 @@ export function DataTable<T extends object>(
           />
           {contexMenu && (
             <Dropdown overlay={contexMenu} placement="bottomRight">
-              <Button type="text" size="small">
+              <Button type="ghost">
                 <MenuOutlined />
               </Button>
             </Dropdown>
diff --git a/desktop/plugins/public/logs/index.tsx b/desktop/plugins/public/logs/index.tsx
index 241ece6e7dd..a1635caed3e 100644
--- a/desktop/plugins/public/logs/index.tsx
+++ b/desktop/plugins/public/logs/index.tsx
@@ -275,12 +275,13 @@ export function Component() {
         plugin.isConnected ? (
           <>
             <Button
+              type="ghost"
               title={`Click to ${paused ? 'resume' : 'pause'} the log stream`}
               danger={paused}
               onClick={plugin.resumePause}>
               {paused ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
             </Button>
-            <Button title="Clear logs" onClick={plugin.clearLogs}>
+            <Button type="ghost" title="Clear logs" onClick={plugin.clearLogs}>
               <DeleteOutlined />
             </Button>
           </>
diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx
index fdbceb14ff4..0060f59b0fc 100644
--- a/desktop/plugins/public/network/index.tsx
+++ b/desktop/plugins/public/network/index.tsx
@@ -611,11 +611,16 @@ export function Component() {
           enableAutoScroll
           extraActions={
             <Layout.Horizontal gap>
-              <Button title="Clear logs" onClick={instance.clearLogs}>
+              <Button
+                type="ghost"
+                title="Clear logs"
+                onClick={instance.clearLogs}>
                 <DeleteOutlined />
               </Button>
               {isMockResponseSupported && (
-                <Button onClick={instance.onMockButtonPressed}>Mock</Button>
+                <Button type="ghost" onClick={instance.onMockButtonPressed}>
+                  Mock
+                </Button>
               )}
             </Layout.Horizontal>
           }
diff --git a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
index 3b990220a9b..592e4e3ddec 100644
--- a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
+++ b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
@@ -121,6 +121,7 @@ export function FrameworkEventsTable({
           <>
             <Tooltip title="Back to tree">
               <Button
+                type="ghost"
                 onClick={() => {
                   instance.uiActions.onFocusNode(undefined);
                   instance.uiActions.onSetViewMode({mode: 'default'});
@@ -129,6 +130,7 @@ export function FrameworkEventsTable({
             </Tooltip>
             <Tooltip title="Delete all events">
               <Button
+                type="ghost"
                 onClick={() => {
                   instance.frameworkEvents.clear();
                   managerRef.current?.clearSelection();