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,28 +33,42 @@ export const PowerSearchEnumTerm: React.FC<PowerSearchEnumTermProps> = ({
   }, [enumLabels]);
 
   const selectValueRef = React.useRef<string>();
+  if (defaultValue && !selectValueRef.current) {
+    selectValueRef.current = defaultValue;
+  }
+
+  if (editing) {
+    return (
+      <Select
+        autoFocus
+        style={{width: 100}}
+        placeholder="..."
+        options={options}
+        defaultOpen
+        onBlur={() => {
+          if (!selectValueRef.current) {
+            onCancel();
+          }
+          setEditing(false);
+        }}
+        onSelect={(value) => {
+          selectValueRef.current = value;
+          onChange(value);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === 'Escape') {
+            event.currentTarget.blur();
+          }
+        }}
+        defaultValue={defaultValue}
+      />
+    );
+  }
 
   return (
-    <Select
-      autoFocus
-      style={{width: 100}}
-      placeholder="..."
-      options={options}
-      defaultOpen
-      onBlur={() => {
-        if (!selectValueRef.current) {
-          onCancel();
-        }
-      }}
-      onSelect={(value) => {
-        selectValueRef.current = value;
-        onChange(value);
-      }}
-      onKeyDown={(event) => {
-        if (event.key === 'Enter' || event.key === 'Escape') {
-          event.currentTarget.blur();
-        }
-      }}
-    />
+    <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>
-            {searchTerm.operator.enumLabels[searchTerm.searchValue]}
-          </Button>
+          <PowerSearchEnumTerm
+            onCancel={onCancel}
+            onChange={(newValue) => {
+              onFinalize({
+                ...searchTerm,
+                searchValue: newValue,
+              });
+            }}
+            enumLabels={searchTerm.operator.enumLabels}
+            defaultValue={searchTerm.searchValue}
+          />
         );
         break;
       }