Make integer term editable

Summary: For the purposes of the demo I added power search config for an integer field to the summary field

Reviewed By: lblasa

Differential Revision: D49452729

fbshipit-source-id: 78b8fdccfd799a0f71f652d90d10e11db237cbae

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

@@ -7,50 +7,61 @@
  * @format
  */
 
-import {Input} from 'antd';
+import {Button, Input} from 'antd';
 import React from 'react';
 
 type PowerSearchIntegerTermProps = {
   onCancel: () => void;
   onChange: (value: number) => void;
+  defaultValue?: number;
 };
 
 export const PowerSearchIntegerTerm: React.FC<PowerSearchIntegerTermProps> = ({
   onCancel,
   onChange,
+  defaultValue,
 }) => {
-  return (
-    <Input
-      autoFocus
-      style={{width: 100}}
-      placeholder="..."
-      onChange={(event) => {
-        const newValue = event.target.value;
+  const [editing, setEditing] = React.useState(!defaultValue);
 
-        const normalizedValue = parseInt(newValue, 10);
+  if (editing) {
+    return (
+      <Input
+        autoFocus
+        style={{width: 100}}
+        placeholder="..."
+        onChange={(event) => {
+          const newValue = event.target.value;
 
-        if (normalizedValue.toString() !== newValue) {
-          event.target.value = normalizedValue.toString();
-        }
-      }}
-      onBlur={(event) => {
-        const newValue = event.target.value;
+          const normalizedValue = parseInt(newValue, 10);
 
-        if (!newValue) {
-          onCancel();
-          return;
-        }
+          if (normalizedValue.toString() !== newValue) {
+            event.target.value = normalizedValue.toString();
+          }
+        }}
+        onBlur={(event) => {
+          const newValue = event.target.value;
 
-        const normalizedValue = parseInt(newValue, 10);
-        onChange(normalizedValue);
-      }}
-      onKeyDown={(event) => {
-        if (event.key === 'Enter' || event.key === 'Escape') {
-          event.currentTarget.blur();
-        }
-      }}
-      type="number"
-      step={1}
-    />
-  );
+          setEditing(false);
+
+          if (!newValue) {
+            onCancel();
+            return;
+          }
+
+          const normalizedValue = parseInt(newValue, 10);
+          onChange(normalizedValue);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === 'Escape') {
+            event.currentTarget.blur();
+          }
+        }}
+        type="number"
+        step={1}
+        defaultValue={defaultValue}
+      />
+    );
+  }
+
+  return <Button onClick={() => setEditing(true)}>{defaultValue}</Button>;
 };

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

@@ -86,6 +86,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
                 searchValue: newValue,
               });
             }}
+            defaultValue={searchTerm.searchValue}
           />
         );
         break;
@@ -181,6 +182,21 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         );
         break;
       }
+      case 'INTEGER': {
+        searchValueComponent = (
+          <PowerSearchIntegerTerm
+            onCancel={onCancel}
+            onChange={(newValue) => {
+              onFinalize({
+                ...searchTerm,
+                searchValue: newValue,
+              });
+            }}
+            defaultValue={searchTerm.searchValue}
+          />
+        );
+        break;
+      }
       case 'ENUM': {
         searchValueComponent = (
           <PowerSearchEnumTerm