Fix filtering bugs

Summary: Doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU/edit#heading=h.pg8svtdjlx7

Reviewed By: antonk52

Differential Revision: D49411941

fbshipit-source-id: 530b0abcbba57e2503da4641d17fd1a507955b45

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

@@ -14,12 +14,14 @@ type PowerSearchEnumSetTermProps = {
   onCancel: () => void;
   onChange: (value: string[]) => void;
   enumLabels: {[key: string]: string};
+  defaultValue?: string[];
 };
 
 export const PowerSearchEnumSetTerm: React.FC<PowerSearchEnumSetTermProps> = ({
   onCancel,
   onChange,
   enumLabels,
+  defaultValue,
 }) => {
   const options = React.useMemo(() => {
     return Object.entries(enumLabels).map(([key, label]) => ({
@@ -29,15 +31,19 @@ export const PowerSearchEnumSetTerm: React.FC<PowerSearchEnumSetTermProps> = ({
   }, [enumLabels]);
 
   const selectValueRef = React.useRef<string[]>();
+  if (defaultValue && !selectValueRef.current) {
+    selectValueRef.current = defaultValue;
+  }
 
   return (
     <Select
       mode="multiple"
-      autoFocus
+      autoFocus={!defaultValue}
       style={{minWidth: 100}}
       placeholder="..."
       options={options}
-      defaultOpen
+      defaultOpen={!defaultValue}
+      defaultValue={defaultValue}
       onBlur={() => {
         if (!selectValueRef.current?.length) {
           onCancel();

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

@@ -13,19 +13,24 @@ import React from 'react';
 type PowerSearchStringSetTermProps = {
   onCancel: () => void;
   onChange: (value: string[]) => void;
+  defaultValue?: string[];
 };
 
 export const PowerSearchStringSetTerm: React.FC<
   PowerSearchStringSetTermProps
-> = ({onCancel, onChange}) => {
+> = ({onCancel, onChange, defaultValue}) => {
   const selectValueRef = React.useRef<string[]>();
+  if (defaultValue && !selectValueRef.current) {
+    selectValueRef.current = defaultValue;
+  }
 
   return (
     <Select
       mode="tags"
-      autoFocus
+      autoFocus={!defaultValue}
       style={{minWidth: 100}}
       placeholder="..."
+      defaultValue={defaultValue}
       onBlur={() => {
         if (!selectValueRef.current?.length) {
           onCancel();

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

@@ -33,19 +33,19 @@ export type SearchExpressionTerm = Required<IncompleteSearchExpressionTerm>;
 
 type PowerSearchTermProps = {
   searchTerm: IncompleteSearchExpressionTerm;
-  searchValueRenderer: 'input' | 'button';
   onCancel: () => void;
   onFinalize: (completeSearchTerm: SearchExpressionTerm) => void;
 };
 
 export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
   searchTerm,
-  searchValueRenderer,
   onCancel,
   onFinalize,
 }) => {
+  const hasValue = searchTerm.searchValue != null;
+
   let searchValueComponent: React.ReactNode = null;
-  if (searchValueRenderer === 'input') {
+  if (!hasValue) {
     switch (searchTerm.operator.valueType) {
       case 'STRING': {
         searchValueComponent = (
@@ -183,6 +183,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
               });
             }}
             enumLabels={searchTerm.operator.enumLabels}
+            defaultValue={searchTerm.searchValue}
           />
         );
         break;
@@ -197,6 +198,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
                 searchValue: newValue,
               });
             }}
+            defaultValue={searchTerm.searchValue}
           />
         );
         break;

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

@@ -84,17 +84,14 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
     return groupedOptions;
   }, [config.fields]);
 
-  const lastSearchTermHasSearchValue =
-    searchExpression.length > 0
-      ? searchExpression[searchExpression.length - 1].searchValue !== undefined
-      : false;
-
   const searchTermFinderRef = React.useRef<{
     focus: () => void;
     blur: () => void;
     scrollTo: () => void;
   }>(null);
 
+  console.log('searchExpression', searchExpression);
+
   return (
     <PowerSearchContainer>
       <Space size={[theme.space.tiny, 0]}>
@@ -106,15 +103,10 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
           }}
         />
         {searchExpression.map((searchTerm, i) => {
-          const isLastTerm = i === searchExpression.length - 1;
-
           return (
             <PowerSearchTerm
               key={i.toString()}
               searchTerm={searchTerm}
-              searchValueRenderer={
-                lastSearchTermHasSearchValue || !isLastTerm ? 'button' : 'input'
-              }
               onCancel={() => {
                 setSearchExpression((prevSearchExpression) => {
                   if (prevSearchExpression[i]) {

desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearchManager.tsx

@@ -339,6 +339,11 @@ export function createInitialState<T>(
     });
   }
 
+  let searchExpression = config.initialSearchExpression;
+  if (prefs?.searchExpression?.length) {
+    searchExpression = prefs.searchExpression;
+  }
+
   const res: DataManagerState<T> = {
     config,
     storageKey,
@@ -352,7 +357,7 @@ export function createInitialState<T>(
           items: new Set(prefs!.selection.items),
         }
       : emptySelection,
-    searchExpression: prefs?.searchExpression ?? config.initialSearchExpression,
+    searchExpression,
     filterExceptions: undefined,
     autoScroll: prefs?.autoScroll ?? config.autoScroll ?? false,
     sideBySide: false,
@@ -473,7 +478,7 @@ export function computeDataTableFilter(
     if (!searchExpression || !searchExpression.length) {
       return true;
     }
-    return searchExpression.some((searchTerm) => {
+    return searchExpression.every((searchTerm) => {
       const value = getValueAtPath(item, searchTerm.field.key);
       if (!value) {
         console.warn(