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
facebook · Apr 18, 2024 · 5cb4c0d · 5cb4c0d
1 parent 372a25f
commit 5cb4c0d
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();