Compute power search config from columns

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

Reviewed By: antonk52

Differential Revision: D49349521

fbshipit-source-id: 49f8059bdbfbcc316b79eb633ec54d957f16548d

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

@@ -63,6 +63,5 @@ export type FieldConfig = {
 };
 
 export type PowerSearchConfig = {
-  name: string;
   fields: {[key: string]: FieldConfig};
 };

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

@@ -104,7 +104,6 @@ const operators = {
 } satisfies {[key: string]: OperatorConfig};
 
 export const powerSearchExampleConfig: PowerSearchConfig = {
-  name: 'FlipperPowerSearchExampleConfig',
   fields: {
     title: {
       key: 'title',

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

@@ -61,8 +61,7 @@ import {
   _DataSourceView,
 } from 'flipper-plugin-core';
 import {useLatestRef} from '../../utils/useLatestRef';
-import {PowerSearch, OperatorConfig} from '../PowerSearch';
-import {powerSearchExampleConfig} from '../PowerSearch/PowerSearchExampleConfig';
+import {PowerSearch, PowerSearchConfig, FieldConfig} from '../PowerSearch';
 import {
   dataTablePowerSearchOperatorProcessorConfig,
   dataTablePowerSearchOperators,
@@ -237,6 +236,30 @@ export function DataTable<T extends object>(
     [columns],
   );
 
+  const powerSearchConfig: PowerSearchConfig = useMemo(() => {
+    const res: PowerSearchConfig = {fields: {}};
+
+    for (const column of columns) {
+      const columnFieldConfig: FieldConfig = {
+        label: column.title ?? column.key,
+        key: column.key,
+        // If no power search config provided we treat every input as a string
+        operators: column.powerSearchConfig ?? {
+          string_contains: dataTablePowerSearchOperators.string_contains(),
+          string_not_contains:
+            dataTablePowerSearchOperators.string_not_contains(),
+          string_matches_exactly:
+            dataTablePowerSearchOperators.string_matches_exactly(),
+          string_not_matches_exactly:
+            dataTablePowerSearchOperators.string_not_matches_exactly(),
+        },
+      };
+      res.fields[column.key] = columnFieldConfig;
+    }
+
+    return res;
+  }, [columns]);
+
   const renderingConfig = useMemo<TableRowRenderContext<T>>(() => {
     let startIndex = 0;
 
@@ -439,8 +462,6 @@ export function DataTable<T extends object>(
     [
       tableState.searchExpression,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...tableState.columns.map((c) => c.filters),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       ...tableState.columns.map((c) => c.inversed),
       tableState.filterExceptions,
     ],
@@ -603,7 +624,7 @@ export function DataTable<T extends object>(
       {props.enableSearchbar && (
         <Searchbar gap>
           <PowerSearch
-            config={powerSearchExampleConfig}
+            config={powerSearchConfig}
             initialSearchExpression={searchExpression}
             onSearchExpressionChange={(newSearchExpression) => {
               tableManager.setSearchExpression(newSearchExpression);

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

@@ -7,7 +7,7 @@
  * @format
  */
 
-import type {DataTableColumn} from './DataTable';
+import type {DataTableColumn} from './DataTableWithPowerSearch';
 import {Percentage} from '../../utils/widthUtils';
 import {MutableRefObject, Reducer, RefObject} from 'react';
 import {DataSourceVirtualizer} from '../../data-source/index';
@@ -43,10 +43,7 @@ type PersistedState = {
   /** The currently applicable sorting, if any */
   sorting: Sorting | undefined;
   /** The default columns, but normalized */
-  columns: Pick<
-    DataTableColumn,
-    'key' | 'width' | 'filters' | 'visible' | 'inversed'
-  >[];
+  columns: Pick<DataTableColumn, 'key' | 'width' | 'visible' | 'inversed'>[];
   scrollOffset: number;
   autoScroll: boolean;
 };
@@ -143,9 +140,6 @@ export const dataTableManagerReducer = produce<
       break;
     }
     case 'resetFilters': {
-      draft.columns.forEach((c) =>
-        c.filters?.forEach((f) => (f.enabled = false)),
-      );
       draft.searchExpression = undefined;
       draft.filterExceptions = undefined;
       break;
@@ -446,11 +440,6 @@ function computeInitialColumns(
       (columnsWithoutWidth > 1
         ? `${Math.floor(100 / visibleColumnCount)}%`
         : undefined),
-    filters:
-      c.filters?.map((f) => ({
-        ...f,
-        predefined: true,
-      })) ?? [],
     visible: c.visible !== false,
   }));
 }

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

@@ -21,7 +21,7 @@ import {
   _tryGetFlipperLibImplementation,
   _DataSourceView,
 } from 'flipper-plugin-core';
-import {DataTableColumn} from './DataTable';
+import {DataTableColumn} from './DataTableWithPowerSearch';
 import {toFirstUpper} from '../../utils/toFirstUpper';
 import {renderColumnValue} from './TableRow';
 import {textContent} from '../../utils/textContent';