Make enum term editable

Reviewed By: lblasa

Differential Revision: D49452483

fbshipit-source-id: e9bef3c5499a91231f6025e403c132b924491def

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

@@ -7,20 +7,24 @@
  * @format
  */
 
-import {Select} from 'antd';
+import {Button, Select} from 'antd';
 import React from 'react';
 
 type PowerSearchEnumTermProps = {
   onCancel: () => void;
   onChange: (value: string) => void;
   enumLabels: {[key: string]: string};
+  defaultValue?: string;
 };
 
 export const PowerSearchEnumTerm: React.FC<PowerSearchEnumTermProps> = ({
   onCancel,
   onChange,
   enumLabels,
+  defaultValue,
 }) => {
+  const [editing, setEditing] = React.useState(!defaultValue);
+
   const options = React.useMemo(() => {
     return Object.entries(enumLabels).map(([key, label]) => ({
       label,
@@ -29,7 +33,11 @@ export const PowerSearchEnumTerm: React.FC<PowerSearchEnumTermProps> = ({
   }, [enumLabels]);
 
   const selectValueRef = React.useRef<string>();
+  if (defaultValue && !selectValueRef.current) {
+    selectValueRef.current = defaultValue;
+  }
 
+  if (editing) {
     return (
       <Select
         autoFocus
@@ -41,6 +49,7 @@ export const PowerSearchEnumTerm: React.FC<PowerSearchEnumTermProps> = ({
           if (!selectValueRef.current) {
             onCancel();
           }
+          setEditing(false);
         }}
         onSelect={(value) => {
           selectValueRef.current = value;
@@ -51,6 +60,15 @@ export const PowerSearchEnumTerm: React.FC<PowerSearchEnumTermProps> = ({
             event.currentTarget.blur();
           }
         }}
+        defaultValue={defaultValue}
       />
     );
+  }
+
+  return (
+    <Button onClick={() => setEditing(true)}>
+      {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
+      {enumLabels[defaultValue!]}
+    </Button>
+  );
 };

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

@@ -120,6 +120,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
               });
             }}
             enumLabels={searchTerm.operator.enumLabels}
+            defaultValue={searchTerm.searchValue}
           />
         );
         break;
@@ -182,9 +183,17 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
       }
       case 'ENUM': {
         searchValueComponent = (
-          <Button>
+          <PowerSearchEnumTerm
-            {searchTerm.operator.enumLabels[searchTerm.searchValue]}
+            onCancel={onCancel}
-          </Button>
+            onChange={(newValue) => {
+              onFinalize({
+                ...searchTerm,
+                searchValue: newValue,
+              });
+            }}
+            enumLabels={searchTerm.operator.enumLabels}
+            defaultValue={searchTerm.searchValue}
+          />
         );
         break;
       }