Support ENUM_SET operator type

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

Reviewed By: lblasa

Differential Revision: D48648499

fbshipit-source-id: ee24ae15c1e6533398db0af79597388e473f97e7

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

@@ -11,7 +11,7 @@
 
 export type SimpleFilterValueType = 'NO_VALUE' | 'INTEGER' | 'FLOAT' | 'STRING';
 
-export type EnumFilterValueType = 'ENUM';
+export type EnumFilterValueType = 'ENUM' | 'ENUM_SET';
 
 export type AbsoluteDateFilterValueType = 'ABSOLUTE_DATE';
 

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

@@ -0,0 +1,62 @@
+/**
+ * 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 PowerSearchEnumSetTermProps = {
+  onCancel: () => void;
+  onChange: (value: string[]) => void;
+  enumLabels: {[key: string]: string};
+};
+
+export const PowerSearchEnumSetTerm: React.FC<PowerSearchEnumSetTermProps> = ({
+  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
+      mode="multiple"
+      autoFocus
+      style={{minWidth: 100}}
+      placeholder="..."
+      options={options}
+      defaultOpen
+      onBlur={() => {
+        if (!selectValueRef.current?.length) {
+          onCancel();
+        }
+      }}
+      onChange={(value) => {
+        if (!value.length) {
+          onCancel();
+          return;
+        }
+        selectValueRef.current = value;
+        onChange(value);
+      }}
+      onClear={onCancel}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === 'Escape') {
+          event.currentTarget.blur();
+        }
+      }}
+    />
+  );
+};

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

@@ -13,7 +13,6 @@ const MyMacroEnum = {
   SURE_WHY_NOT: 'surewhynot',
   DOGSCIENCE: 'dogscience',
   TEST_IN_PROD: 'testinproduction',
-  '': '',
 };
 
 const operators = {
@@ -64,6 +63,12 @@ const operators = {
     valueType: 'ENUM',
     enumLabels: MyMacroEnum,
   },
+  macro_is_any_of: {
+    label: 'is any of',
+    key: 'macro_is_any_of',
+    valueType: 'ENUM_SET',
+    enumLabels: MyMacroEnum,
+  },
   predictive_contain: {
     label: 'contains',
     key: 'predictive_contain',
@@ -158,6 +163,7 @@ export const powerSearchExampleConfig: PowerSearchConfig = {
       operators: {
         macro_is: operators.macro_is,
         macro_is_not: operators.macro_is_not,
+        macro_is_any_of: operators.macro_is_any_of,
       },
     },
     unread_only: {

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

@@ -17,6 +17,7 @@ import {
   PowerSearchAbsoluteDateTerm,
 } from './PowerSearchAbsoluteDateTerm';
 import {FieldConfig, OperatorConfig} from './PowerSearchConfig';
+import {PowerSearchEnumSetTerm} from './PowerSearchEnumSetTerm';
 import {PowerSearchEnumTerm} from './PowerSearchEnumTerm';
 import {PowerSearchFloatTerm} from './PowerSearchFloatTerm';
 import {PowerSearchIntegerTerm} from './PowerSearchIntegerTerm';
@@ -107,6 +108,21 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         );
         break;
       }
+      case 'ENUM_SET': {
+        searchValueComponent = (
+          <PowerSearchEnumSetTerm
+            onCancel={onCancel}
+            onChange={(newValue) => {
+              onFinalize({
+                ...searchTerm,
+                searchValue: newValue,
+              });
+            }}
+            enumLabels={searchTerm.operator.enumLabels}
+          />
+        );
+        break;
+      }
       case 'ABSOLUTE_DATE': {
         searchValueComponent = (
           <PowerSearchAbsoluteDateTerm
@@ -141,6 +157,21 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         );
         break;
       }
+      case 'ENUM_SET': {
+        searchValueComponent = (
+          <PowerSearchEnumSetTerm
+            onCancel={onCancel}
+            onChange={(newValue) => {
+              onFinalize({
+                ...searchTerm,
+                searchValue: newValue,
+              });
+            }}
+            enumLabels={searchTerm.operator.enumLabels}
+          />
+        );
+        break;
+      }
       case 'ABSOLUTE_DATE': {
         searchValueComponent = (
           <Button>