From 795d02d00c640a8f299575fcbfbeb507dc8686a3 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Wed, 30 Aug 2023 07:26:35 -0700
Subject: [PATCH] Separate search term parts

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

Reviewed By: lblasa

Differential Revision: D48520106

fbshipit-source-id: 2a544230f182bd82023310ea88742fab44e2df9b
---
 .../src/ui/PowerSearch/index.tsx              | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index 8cdcc5a1e..b9ffdb9da 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
@@ -8,8 +8,12 @@
  */
 
 import * as React from 'react';
-import {AutoComplete, Space, Tag} from 'antd';
-import {PowerSearchConfig} from './PowerSearchTypes';
+import {AutoComplete, Button, Space} from 'antd';
+import {
+  PowerSearchConfig,
+  FieldConfig,
+  OperatorConfig,
+} from './PowerSearchTypes';
 
 export {PowerSearchConfig};
 
@@ -26,9 +30,15 @@ type AutocompleteOptionGroup = {
 
 const OPTION_KEY_DELIMITER = '::';
 
+type SearchExpressionTerm = {
+  field: FieldConfig;
+  operator: OperatorConfig;
+  searchValue?: string;
+};
+
 export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
   const [searchExpression, setSearchExpression] = React.useState<
-    AutocompleteOption[]
+    SearchExpressionTerm[]
   >([]);
 
   const options: AutocompleteOptionGroup[] = React.useMemo(() => {
@@ -58,8 +68,12 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
   return (
     <div style={{display: 'flex', flexDirection: 'row'}}>
       <Space size={[0, 8]}>
-        {searchExpression.map((searchTerm) => (
-          <Tag key={searchTerm.value}>{searchTerm.label}</Tag>
+        {searchExpression.map((searchTerm, i) => (
+          <Space key={i.toString()}>
+            <Button>{searchTerm.field.label}</Button>
+            <Button>{searchTerm.operator.label}</Button>
+            <Button>{searchTerm.searchValue}</Button>
+          </Space>
         ))}
       </Space>
       <AutoComplete
@@ -67,10 +81,17 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
         options={options}
         bordered={false}
         onSelect={(_: string, selectedOption: AutocompleteOption) => {
-          console.log('selectedOption', selectedOption);
+          const [fieldKey, operatorKey] =
+            selectedOption.value.split(OPTION_KEY_DELIMITER);
+          const fieldConfig = config.fields[fieldKey];
+          const operatorConfig = fieldConfig.operators[operatorKey];
+
           setSearchExpression((prevSearchExpression) => [
             ...prevSearchExpression,
-            selectedOption,
+            {
+              field: fieldConfig,
+              operator: operatorConfig,
+            },
           ]);
         }}
         value={null}