From 78b650dbe0f8985cb568dcba9fa049d21c4709af Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Fri, 28 Apr 2023 12:19:45 -0700
Subject: [PATCH] Make fliters non-exclusive

Summary:
Project: https://docs.google.com/document/d/1SbFrpvfIShX5npANNa1AkgHliR1M-VMLW5Q9RhREt94/edit

Also, sync quick filters with the internal filter state of the table

Reviewed By: antonk52

Differential Revision: D45396180

fbshipit-source-id: 6a8ef4ac61a49ec7af71ae9e26f20f395fb34cef
---
 .../src/ui/data-table/DataTableManager.tsx    | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
index 79cf0a0af..e3227b689 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
@@ -9,7 +9,7 @@
 
 import type {DataTableColumn} from './DataTable';
 import {Percentage} from '../../utils/widthUtils';
-import {MutableRefObject, Reducer} from 'react';
+import {MutableRefObject, Reducer, RefObject} from 'react';
 import {DataSourceVirtualizer} from '../../data-source/index';
 import produce, {castDraft, immerable, original} from 'immer';
 import {theme} from '../theme';
@@ -101,13 +101,13 @@ type DataManagerActions<T> =
     >
   | Action<
       'removeColumnFilter',
-      | {column: keyof T; index: number; value?: never}
-      | {column: keyof T; index?: never; value: string}
+      | {column: keyof T; index: number; label?: never}
+      | {column: keyof T; index?: never; label: string}
     >
   | Action<
       'toggleColumnFilter',
-      | {column: keyof T; index: number; value?: never}
-      | {column: keyof T; index?: never; value: string}
+      | {column: keyof T; index: number; label?: never}
+      | {column: keyof T; index?: never; label: string}
     >
   | Action<'setColumnFilterInverse', {column: keyof T; inversed: boolean}>
   | Action<'setColumnFilterFromSelection', {column: keyof T}>
@@ -288,7 +288,7 @@ export const dataTableManagerReducer = produce<
       const column = draft.columns.find((c) => c.key === action.column)!;
       const index =
         action.index ??
-        column.filters?.findIndex((f) => f.value === action.value!);
+        column.filters?.findIndex((f) => f.label === action.label!);
 
       if (index === undefined || index < 0) {
         break;
@@ -301,7 +301,7 @@ export const dataTableManagerReducer = produce<
       const column = draft.columns.find((c) => c.key === action.column)!;
       const index =
         action.index ??
-        column.filters?.findIndex((f) => f.value === action.value!);
+        column.filters?.findIndex((f) => f.label === action.label!);
 
       if (index === undefined || index < 0) {
         break;
@@ -395,7 +395,7 @@ export type DataTableManager<T> = {
   sortColumn(column: keyof T, direction?: SortDirection): void;
   setSearchValue(value: string, addToHistory?: boolean): void;
   dataView: _DataSourceView<T, T[keyof T]>;
-  state: Readonly<DataManagerState<T>>;
+  stateRef: RefObject<Readonly<DataManagerState<T>>>;
   toggleSearchValue(): void;
   toggleHighlightSearch(): void;
   setSearchHighlightColor(color: string): void;
@@ -407,7 +407,7 @@ export type DataTableManager<T> = {
     value: string,
     disableOthers?: boolean,
   ): void;
-  removeColumnFilter(column: keyof T, value: string): void;
+  removeColumnFilter(column: keyof T, label: string): void;
 };
 
 export function createDataTableManager<T>(
@@ -475,11 +475,11 @@ export function createDataTableManager<T>(
     addColumnFilter(column, value, disableOthers) {
       dispatch({type: 'addColumnFilter', column, value, disableOthers});
     },
-    removeColumnFilter(column, value) {
-      dispatch({type: 'removeColumnFilter', column, value});
+    removeColumnFilter(column, label) {
+      dispatch({type: 'removeColumnFilter', column, label});
     },
     dataView,
-    state: stateRef.current,
+    stateRef,
   };
 }