Support STRING_SET operator type

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

Data table integration comes later

Reviewed By: lblasa

Differential Revision: D48648822

fbshipit-source-id: 74f92c0e818c4507fd6575f6a122d107373cfe0c

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

@@ -9,7 +9,12 @@
 
 // Mostly matches https://www.internalfb.com/code/www/html/intern/js/ui/PowerSearch/PowerSearchExampleConfig.js
 
-export type SimpleFilterValueType = 'NO_VALUE' | 'INTEGER' | 'FLOAT' | 'STRING';
+export type SimpleFilterValueType =
+  | 'NO_VALUE'
+  | 'INTEGER'
+  | 'FLOAT'
+  | 'STRING'
+  | 'STRING_SET';
 
 export type EnumFilterValueType = 'ENUM' | 'ENUM_SET';
 

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

@@ -26,6 +26,11 @@ const operators = {
     key: 'not_contain',
     valueType: 'STRING',
   },
+  contains_any_of: {
+    label: 'contains any of',
+    key: 'contains_any_of',
+    valueType: 'STRING_SET',
+  },
   greater_than: {
     label: '>',
     key: 'greater_than',
@@ -115,6 +120,7 @@ export const powerSearchExampleConfig: PowerSearchConfig = {
       operators: {
         contain: operators.contain,
         not_contain: operators.not_contain,
+        contains_any_of: operators.contains_any_of,
       },
     },
     placeholder: {

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

@@ -0,0 +1,51 @@
+/**
+ * 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 PowerSearchStringSetTermProps = {
+  onCancel: () => void;
+  onChange: (value: string[]) => void;
+};
+
+export const PowerSearchStringSetTerm: React.FC<
+  PowerSearchStringSetTermProps
+> = ({onCancel, onChange}) => {
+  const selectValueRef = React.useRef<string[]>();
+
+  return (
+    <Select
+      mode="tags"
+      autoFocus
+      style={{minWidth: 100}}
+      placeholder="..."
+      onBlur={() => {
+        if (!selectValueRef.current?.length) {
+          onCancel();
+        }
+      }}
+      open={false}
+      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/PowerSearchTerm.tsx

@@ -21,6 +21,7 @@ import {PowerSearchEnumSetTerm} from './PowerSearchEnumSetTerm';
 import {PowerSearchEnumTerm} from './PowerSearchEnumTerm';
 import {PowerSearchFloatTerm} from './PowerSearchFloatTerm';
 import {PowerSearchIntegerTerm} from './PowerSearchIntegerTerm';
+import {PowerSearchStringSetTerm} from './PowerSearchStringSetTerm';
 import {PowerSearchStringTerm} from './PowerSearchStringTerm';
 
 export type IncompleteSearchExpressionTerm = {
@@ -60,6 +61,20 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         );
         break;
       }
+      case 'STRING_SET': {
+        searchValueComponent = (
+          <PowerSearchStringSetTerm
+            onCancel={onCancel}
+            onChange={(newValue) => {
+              onFinalize({
+                ...searchTerm,
+                searchValue: newValue,
+              });
+            }}
+          />
+        );
+        break;
+      }
       case 'INTEGER': {
         searchValueComponent = (
           <PowerSearchIntegerTerm
@@ -172,6 +187,20 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         );
         break;
       }
+      case 'STRING_SET': {
+        searchValueComponent = (
+          <PowerSearchStringSetTerm
+            onCancel={onCancel}
+            onChange={(newValue) => {
+              onFinalize({
+                ...searchTerm,
+                searchValue: newValue,
+              });
+            }}
+          />
+        );
+        break;
+      }
       case 'ABSOLUTE_DATE': {
         searchValueComponent = (
           <Button>