From 857e2d2ead8a7901e5b91df756564828732f267c Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Wed, 30 Aug 2023 07:26:35 -0700
Subject: [PATCH] Support enum operator type

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

Reviewed By: lblasa

Differential Revision: D48605906

fbshipit-source-id: d81243fbc8b33e366e9207f282ba42808cfab533
---
 .../ui/PowerSearch/PowerSearchEnumTerm.tsx    | 56 +++++++++++++++++++
 .../src/ui/PowerSearch/PowerSearchTerm.tsx    | 16 ++++++
 2 files changed, 72 insertions(+)
 create mode 100644 desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchEnumTerm.tsx

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchEnumTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchEnumTerm.tsx
new file mode 100644
index 000000000..91e60fcc8
--- /dev/null
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchEnumTerm.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Select} from 'antd';
+import React from 'react';
+
+type PowerSearchEnumTermProps = {
+  onCancel: () => void;
+  onChange: (value: string) => void;
+  enumLabels: {[key: string]: string};
+};
+
+export const PowerSearchEnumTerm: React.FC<PowerSearchEnumTermProps> = ({
+  onCancel,
+  onChange,
+  enumLabels,
+}) => {
+  const options = React.useMemo(() => {
+    return Object.entries(enumLabels).map(([key, label]) => ({
+      label,
+      value: key,
+    }));
+  }, [enumLabels]);
+
+  const selectValueRef = React.useRef<string>();
+
+  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();
+        }
+      }}
+    />
+  );
+};
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx
index f42d5c11e..63bb2bc21 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx
@@ -11,6 +11,7 @@ import {CloseOutlined} from '@ant-design/icons';
 import {Button, Space} from 'antd';
 import * as React from 'react';
 import {FieldConfig, OperatorConfig} from './PowerSearchConfig';
+import {PowerSearchEnumTerm} from './PowerSearchEnumTerm';
 import {PowerSearchFloatTerm} from './PowerSearchFloatTerm';
 import {PowerSearchIntegerTerm} from './PowerSearchIntegerTerm';
 import {PowerSearchStringTerm} from './PowerSearchStringTerm';
@@ -84,6 +85,21 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
       searchValueInputComponent = null;
       break;
     }
+    case 'ENUM': {
+      searchValueInputComponent = (
+        <PowerSearchEnumTerm
+          onCancel={onCancel}
+          onChange={(newValue) => {
+            onFinalize({
+              ...searchTerm,
+              searchValue: newValue,
+            });
+          }}
+          enumLabels={searchTerm.operator.enumLabels}
+        />
+      );
+      break;
+    }
     default: {
       console.error(
         'PowerSearchTerm -> unknownoperator.valueType',