Add an empty line for a term finder only when it is absolutely necessary

Reviewed By: mweststrate

Differential Revision: D51507094

fbshipit-source-id: cb5e18ab702f60ebbf2e5573180fd21299371139

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx

@@ -17,6 +17,7 @@ const containerStyle = css`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  align-items: baseline;
   border-radius: ${theme.borderRadius};
   border: 1px solid ${theme.borderColor};
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx

@@ -169,7 +169,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
   }
 
   return (
-    <Space.Compact block size="small" style={{margin: theme.space.tiny / 2}}>
+    <Space.Compact size="small" style={{margin: theme.space.tiny / 2}}>
       <Button tabIndex={-1} style={{pointerEvents: 'none'}}>
         {searchTerm.field.label}
       </Button>

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx

@@ -67,6 +67,7 @@ export const PowerSearchTermFinder = React.forwardRef<
           setSearchTermFinderValue(null);
         }}>
         <Input
+          size="small"
           bordered={false}
           onKeyUp={(event) => {
             if (event.key === 'Enter') {

desktop/flipper-plugin/src/ui/PowerSearch/index.tsx

@@ -8,7 +8,6 @@
  */
 
 import * as React from 'react';
-import {Space} from 'antd';
 import {
   PowerSearchConfig,
   FieldConfig,
@@ -129,43 +128,41 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
 
   return (
     <PowerSearchContainer>
-      <Space size={0} wrap>
-        <SearchOutlined
-          style={{
-            margin: theme.space.tiny,
-            color: theme.textColorSecondary,
-          }}
-        />
-        {searchExpression.map((searchTerm, i) => {
-          return (
-            <PowerSearchTerm
-              key={JSON.stringify(searchTerm)}
-              searchTerm={searchTerm}
-              onCancel={() => {
-                setSearchExpression((prevSearchExpression) => {
-                  if (prevSearchExpression[i]) {
-                    return [
-                      ...prevSearchExpression.slice(0, i),
-                      ...prevSearchExpression.slice(i + 1),
-                    ];
-                  }
-                  return prevSearchExpression;
-                });
-              }}
-              onFinalize={(finalSearchTerm) => {
-                setSearchExpression((prevSearchExpression) => {
+      <SearchOutlined
+        style={{
+          margin: theme.space.tiny,
+          color: theme.textColorSecondary,
+        }}
+      />
+      {searchExpression.map((searchTerm, i) => {
+        return (
+          <PowerSearchTerm
+            key={JSON.stringify(searchTerm)}
+            searchTerm={searchTerm}
+            onCancel={() => {
+              setSearchExpression((prevSearchExpression) => {
+                if (prevSearchExpression[i]) {
                   return [
                     ...prevSearchExpression.slice(0, i),
-                    finalSearchTerm,
                     ...prevSearchExpression.slice(i + 1),
                   ];
-                });
-                searchTermFinderRef.current?.focus();
-              }}
-            />
-          );
-        })}
-      </Space>
+                }
+                return prevSearchExpression;
+              });
+            }}
+            onFinalize={(finalSearchTerm) => {
+              setSearchExpression((prevSearchExpression) => {
+                return [
+                  ...prevSearchExpression.slice(0, i),
+                  finalSearchTerm,
+                  ...prevSearchExpression.slice(i + 1),
+                ];
+              });
+              searchTermFinderRef.current?.focus();
+            }}
+          />
+        );
+      })}
       <PowerSearchTermFinder
         ref={searchTermFinderRef}
         options={options}