Make float term editable

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

Reviewed By: lblasa

Differential Revision: D49452844

fbshipit-source-id: 26aaadd07a1a8a67dfcf3cb9d8e487f8f4ee2214

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

@@ -7,18 +7,23 @@
  * @format
  */
 
-import {Input} from 'antd';
+import {Button, Input} from 'antd';
 import React from 'react';
 
 type PowerSearchFloatTermProps = {
   onCancel: () => void;
   onChange: (value: number) => void;
+  defaultValue?: number;
 };
 
 export const PowerSearchFloatTerm: React.FC<PowerSearchFloatTermProps> = ({
   onCancel,
   onChange,
+  defaultValue,
 }) => {
+  const [editing, setEditing] = React.useState(!defaultValue);
+
+  if (editing) {
     return (
       <Input
         autoFocus
@@ -27,6 +32,8 @@ export const PowerSearchFloatTerm: React.FC<PowerSearchFloatTermProps> = ({
         onBlur={(event) => {
           const newValue = event.target.value;
 
+          setEditing(false);
+
           if (!newValue) {
             onCancel();
             return;
@@ -42,6 +49,10 @@ export const PowerSearchFloatTerm: React.FC<PowerSearchFloatTermProps> = ({
         }}
         type="number"
         step={0.1}
+        defaultValue={defaultValue}
       />
     );
+  }
+
+  return <Button onClick={() => setEditing(true)}>{defaultValue}</Button>;
 };

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

@@ -101,6 +101,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
                 searchValue: newValue,
               });
             }}
+            defaultValue={searchTerm.searchValue}
           />
         );
         break;
@@ -197,6 +198,21 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         );
         break;
       }
+      case 'FLOAT': {
+        searchValueComponent = (
+          <PowerSearchFloatTerm
+            onCancel={onCancel}
+            onChange={(newValue) => {
+              onFinalize({
+                ...searchTerm,
+                searchValue: newValue,
+              });
+            }}
+            defaultValue={searchTerm.searchValue}
+          />
+        );
+        break;
+      }
       case 'ENUM': {
         searchValueComponent = (
           <PowerSearchEnumTerm

desktop/flipper-plugin/src/ui/data-table/DataTableDefaultPowerSearchOperators.tsx

@@ -73,7 +73,7 @@ export const dataTablePowerSearchOperators = {
     key: 'int_less_or_equal',
     valueType: 'INTEGER',
   }),
-  float_equals: (precision: number) => ({
+  float_equals: (precision?: number) => ({
     label: '=',
     key: 'float_equals',
     valueType: 'FLOAT',