Expose external API

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

Reviewed By: lblasa

Differential Revision: D48599785

fbshipit-source-id: ae5835ece1299d26dcaeb3cb66668aa919900a85

desktop/flipper-plugin/package.json

@@ -24,6 +24,7 @@
     "lodash": "^4.17.21",
     "react-color": "^2.19.3",
     "react-element-to-jsx-string": "^14.3.4",
+    "react-use": "^17.4.0",
     "react-virtual": "^2.10.4",
     "string-natural-compare": "^3.0.0"
   },

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

@@ -12,17 +12,18 @@ import {Button, Input, Space} from 'antd';
 import * as React from 'react';
 import {FieldConfig, OperatorConfig} from './PowerSearchConfig';
 
-export type SearchExpressionTerm = {
+export type IncompleteSearchExpressionTerm = {
   field: FieldConfig;
   operator: OperatorConfig;
   searchValue?: string;
 };
+export type SearchExpressionTerm = Required<IncompleteSearchExpressionTerm>;
 
 type PowerSearchTermProps = {
-  searchTerm: SearchExpressionTerm;
+  searchTerm: IncompleteSearchExpressionTerm;
   searchValueRenderer: 'input' | 'button';
   onCancel: () => void;
-  onFinalize: (completeSearchTerm: Required<SearchExpressionTerm>) => void;
+  onFinalize: (completeSearchTerm: SearchExpressionTerm) => void;
 };
 
 export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({

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

@@ -11,25 +11,48 @@ import * as React from 'react';
 import {Space} from 'antd';
 import {PowerSearchConfig} from './PowerSearchConfig';
 import {PowerSearchContainer} from './PowerSearchContainer';
-import {PowerSearchTerm, SearchExpressionTerm} from './PowerSearchTerm';
 import {
   PowerSearchTermFinder,
   PowerSearchTermFinderOption,
   PowerSearchTermFinderOptionGroup,
 } from './PowerSearchTermFinder';
+import {
+  IncompleteSearchExpressionTerm,
+  PowerSearchTerm,
+  SearchExpressionTerm,
+} from './PowerSearchTerm';
+import {useLatestRef} from '../../utils/useLatestRef';
+import {useUpdateEffect} from 'react-use';
 
 export {PowerSearchConfig};
 
 type PowerSearchProps = {
   config: PowerSearchConfig;
+  initialSearchExpression?: SearchExpressionTerm[];
+  onSearchExpressionChange: (searchExpression: SearchExpressionTerm[]) => void;
 };
 
 const OPTION_KEY_DELIMITER = '::';
 
-export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
+export const PowerSearch: React.FC<PowerSearchProps> = ({
+  config,
+  initialSearchExpression,
+  onSearchExpressionChange,
+}) => {
   const [searchExpression, setSearchExpression] = React.useState<
-    SearchExpressionTerm[]
-  >([]);
+    IncompleteSearchExpressionTerm[]
+  >(initialSearchExpression ?? []);
+
+  const onSearchExpressionChangeLatestRef = useLatestRef(
+    onSearchExpressionChange,
+  );
+  useUpdateEffect(() => {
+    if (searchExpression.every((term) => term.searchValue !== undefined)) {
+      onSearchExpressionChangeLatestRef.current(
+        searchExpression as SearchExpressionTerm[],
+      );
+    }
+  }, [searchExpression, onSearchExpressionChangeLatestRef]);
 
   const options: PowerSearchTermFinderOptionGroup[] = React.useMemo(() => {
     const groupedOptions: PowerSearchTermFinderOptionGroup[] = [];