Extract PowerSearchTerm

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

Reviewed By: lblasa

Differential Revision: D48599166

fbshipit-source-id: 13b447b55408a8673928489312c4d22cf864c232

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

@@ -0,0 +1,74 @@
+/**
+ * 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 {CloseOutlined} from '@ant-design/icons';
+import {Button, Input, Space} from 'antd';
+import * as React from 'react';
+import {FieldConfig, OperatorConfig} from './PowerSearchConfig';
+
+export type SearchExpressionTerm = {
+  field: FieldConfig;
+  operator: OperatorConfig;
+  searchValue?: string;
+};
+
+type PowerSearchTermProps = {
+  searchTerm: SearchExpressionTerm;
+  searchValueRenderer: 'input' | 'button';
+  onCancel: () => void;
+  onFinalize: (completeSearchTerm: Required<SearchExpressionTerm>) => void;
+};
+
+export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
+  searchTerm,
+  searchValueRenderer,
+  onCancel,
+  onFinalize,
+}) => {
+  return (
+    <Space.Compact block size="small">
+      <Button>{searchTerm.field.label}</Button>
+      <Button>{searchTerm.operator.label}</Button>
+      {searchValueRenderer === 'button' ? (
+        <Button>{searchTerm.searchValue ?? '...'}</Button>
+      ) : (
+        // TODO: Fix width
+        <Input
+          autoFocus
+          style={{width: 100}}
+          placeholder="..."
+          onBlur={(event) => {
+            const newValue = event.target.value;
+
+            if (!newValue) {
+              onCancel();
+              return;
+            }
+
+            onFinalize({
+              ...searchTerm,
+              searchValue: newValue,
+            });
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === 'Escape') {
+              event.currentTarget.blur();
+            }
+          }}
+        />
+      )}
+      <Button
+        icon={<CloseOutlined />}
+        onClick={() => {
+          onCancel();
+        }}
+      />
+    </Space.Compact>
+  );
+};