From 7061de44fe830f03f0faa2ed68310be932ced5d1 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Wed, 30 Aug 2023 07:26:35 -0700
Subject: [PATCH] Support entering freeform search values

Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: lblasa

Differential Revision: D48556764

fbshipit-source-id: aa2d77ce111e33ebe5d936c30d23ed78ca0e2c2e
---
 .../src/ui/PowerSearch/index.tsx              | 63 ++++++++++++++++---
 1 file changed, 54 insertions(+), 9 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index f9bef6126..3caeeb1c3 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {AutoComplete, Button, Space} from 'antd';
+import {AutoComplete, Button, Input, Space} from 'antd';
 import {
   PowerSearchConfig,
   FieldConfig,
@@ -65,18 +65,63 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
     return groupedOptions;
   }, [config.fields]);
 
+  const lastSearchTermHasSearchValue =
+    searchExpression.length > 0
+      ? searchExpression[searchExpression.length - 1].searchValue !== undefined
+      : false;
+
   return (
     <div style={{display: 'flex', flexDirection: 'row'}}>
       <Space size={[0, 8]}>
-        {searchExpression.map((searchTerm, i) => (
-          <Space key={i.toString()}>
-            <Button>{searchTerm.field.label}</Button>
-            <Button>{searchTerm.operator.label}</Button>
-            <Button>{searchTerm.searchValue}</Button>
-          </Space>
-        ))}
+        {searchExpression.map((searchTerm, i) => {
+          const isLastTerm = i === searchExpression.length - 1;
+
+          return (
+            <Space.Compact block size="small" key={i.toString()}>
+              <Button>{searchTerm.field.label}</Button>
+              <Button>{searchTerm.operator.label}</Button>
+              {lastSearchTermHasSearchValue || !isLastTerm ? (
+                <Button>{searchTerm.searchValue ?? '...'}</Button>
+              ) : (
+                // TODO: Fix width
+                <Input
+                  autoFocus
+                  style={{width: 100}}
+                  placeholder="..."
+                  onBlur={(event) => {
+                    const newValue = event.target.value;
+
+                    if (!newValue) {
+                      setSearchExpression((prevSearchExpression) => {
+                        return prevSearchExpression.slice(0, -1);
+                      });
+                      return;
+                    }
+
+                    setSearchExpression((prevSearchExpression) => {
+                      return [
+                        ...prevSearchExpression.slice(0, -1),
+                        {
+                          ...prevSearchExpression[
+                            prevSearchExpression.length - 1
+                          ],
+                          searchValue: newValue,
+                        },
+                      ];
+                    });
+                  }}
+                  onKeyUp={(event) => {
+                    if (event.key === 'Enter') {
+                      event.currentTarget.blur();
+                    }
+                  }}
+                />
+              )}
+            </Space.Compact>
+          );
+        })}
       </Space>
-      <AutoComplete
+      <AutoComplete<string, AutocompleteOption>
         style={{flex: '1'}}
         options={options}
         bordered={false}