From 16b4d58ac337430baf40a04edd9d4bd7243de6a0 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Mon, 12 Jun 2023 07:29:55 -0700
Subject: [PATCH] Support filtering by exact match

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

Reviewed By: antonk52

Differential Revision: D46642517

fbshipit-source-id: e23eead18189adb9aaacb7eab3244cfce289203e
---
 .../flipper-plugin/src/ui/data-table/DataTable.tsx |  1 +
 .../src/ui/data-table/DataTableManager.tsx         | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
index 483e69000..9f8902961 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
@@ -120,6 +120,7 @@ export type DataTableColumn<T = any> = {
     enabled: boolean;
     predefined?: boolean;
     strict?: boolean;
+    exact?: boolean;
   }[];
   inversed?: boolean;
   sortable?: boolean;
diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
index 29a095c5a..d7657b970 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
@@ -63,6 +63,11 @@ type AddColumnFilterOptions = {
    * By disabling this option you make filter include rows that don't have this value ie undefined
    */
   strict?: boolean;
+  /**
+   * By default, the filter is matched as a substring: rowValue.toLowerCase().includes(filter).
+   * With this flag the filter is going to be matched by exact equality: rowValue === filter
+   */
+  exact?: boolean;
   disableOthers?: boolean;
 };
 
@@ -559,7 +564,9 @@ function addColumnFilter<T>(
 ): void {
   options = Object.assign({disableOthers: false, strict: true}, options);
   const column = columns.find((c) => c.key === columnId)!;
-  const filterValue = String(value).toLowerCase();
+  const filterValue = options.exact
+    ? String(value)
+    : String(value).toLowerCase();
   const existing = column.filters!.find((c) => c.value === filterValue);
   if (existing) {
     existing.enabled = true;
@@ -569,6 +576,7 @@ function addColumnFilter<T>(
       value: filterValue,
       enabled: true,
       strict: options.strict,
+      exact: options.exact,
     });
   }
   if (options.disableOthers) {
@@ -719,7 +727,9 @@ export function computeDataTableFilter(
         }
 
         const value = getValueAtPath(item, column.key);
-        const isMatching = String(value).toLowerCase().includes(f.value);
+        const isMatching = f.exact
+          ? String(value) === f.value
+          : String(value).toLowerCase().includes(f.value);
 
         return f.strict ? isMatching : isMatching || value === undefined;
       });