Support integer operator type

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

Reviewed By: lblasa

Differential Revision: D48605154

fbshipit-source-id: 4662b61b217568e593f6b65c8b4dd1d99ea5606a

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchIntegerTerm.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 {Input} from 'antd';
+import React from 'react';
+
+type PowerSearchIntegerTermProps = {
+  onCancel: () => void;
+  onChange: (value: number) => void;
+};
+
+export const PowerSearchIntegerTerm: React.FC<PowerSearchIntegerTermProps> = ({
+  onCancel,
+  onChange,
+}) => {
+  return (
+    <Input
+      autoFocus
+      style={{width: 100}}
+      placeholder="..."
+      onChange={(event) => {
+        const newValue = event.target.value;
+
+        const normalizedValue = parseInt(newValue, 10);
+
+        if (normalizedValue.toString() !== newValue) {
+          event.target.value = normalizedValue.toString();
+        }
+      }}
+      onBlur={(event) => {
+        const newValue = event.target.value;
+
+        if (!newValue) {
+          onCancel();
+          return;
+        }
+
+        const normalizedValue = parseInt(newValue, 10);
+        onChange(normalizedValue);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === 'Escape') {
+          event.currentTarget.blur();
+        }
+      }}
+      type="number"
+      step={1}
+    />
+  );
+};

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

@@ -11,12 +11,13 @@ import {CloseOutlined} from '@ant-design/icons';
 import {Button, Space} from 'antd';
 import * as React from 'react';
 import {FieldConfig, OperatorConfig} from './PowerSearchConfig';
+import {PowerSearchIntegerTerm} from './PowerSearchIntegerTerm';
 import {PowerSearchStringTerm} from './PowerSearchStringTerm';
 
 export type IncompleteSearchExpressionTerm = {
   field: FieldConfig;
   operator: OperatorConfig;
-  searchValue?: string;
+  searchValue?: any;
 };
 export type SearchExpressionTerm = Required<IncompleteSearchExpressionTerm>;
 
@@ -33,13 +34,10 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
   onCancel,
   onFinalize,
 }) => {
-  return (
+  let searchValueInputComponent: React.ReactNode = null;
-    <Space.Compact block size="small">
+  switch (searchTerm.operator.valueType) {
-      <Button>{searchTerm.field.label}</Button>
+    case 'STRING': {
-      <Button>{searchTerm.operator.label}</Button>
+      searchValueInputComponent = (
-      {searchValueRenderer === 'button' ? (
-        <Button>{searchTerm.searchValue ?? '...'}</Button>
-      ) : (
         <PowerSearchStringTerm
           onCancel={onCancel}
           onChange={(newValue) => {
@@ -49,6 +47,40 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
             });
           }}
         />
+      );
+      break;
+    }
+    case 'INTEGER': {
+      searchValueInputComponent = (
+        <PowerSearchIntegerTerm
+          onCancel={onCancel}
+          onChange={(newValue) => {
+            onFinalize({
+              ...searchTerm,
+              searchValue: newValue,
+            });
+          }}
+        />
+      );
+      break;
+    }
+    default: {
+      console.error(
+        'PowerSearchTerm -> unknownoperator.valueType',
+        searchTerm.operator.valueType,
+        searchTerm,
+      );
+    }
+  }
+
+  return (
+    <Space.Compact block size="small">
+      <Button>{searchTerm.field.label}</Button>
+      <Button>{searchTerm.operator.label}</Button>
+      {searchValueRenderer === 'button' ? (
+        <Button>{searchTerm.searchValue ?? '...'}</Button>
+      ) : (
+        searchValueInputComponent
       )}
       <Button
         icon={<CloseOutlined />}