Fixes #7 - Adds a simple quick search to records list.

Kinto · Oct 14, 2024 · 404d8f2 · 404d8f2
1 parent a4b66f2
commit 404d8f2
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 10 deletions.
diff --git a/src/components/collection/RecordTable.tsx b/src/components/collection/RecordTable.tsx
@@ -7,7 +7,7 @@ import SignoffContainer from "@src/containers/signoff/SignoffToolBar";
 import { canCreateRecord } from "@src/permission";
 import type { RecordData } from "@src/types";
 import { capitalize } from "@src/utils";
-import React from "react";
+import React, { useState } from "react";
 import { SortUp } from "react-bootstrap-icons";
 import { SortDown } from "react-bootstrap-icons";
 
@@ -129,6 +129,12 @@ export default function RecordTable({
   redirectTo,
   capabilities,
 }: TableProps) {
+  const [filter, setFilter] = useState("");
+
+  const onFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(e.target.value);
+  };
+
   const getFieldTitle = displayField => {
     if (displayField === "__json") {
       return "Data";
@@ -154,6 +160,12 @@ export default function RecordTable({
     );
   }
 
+  if (filter && records.length) {
+    records = records.filter(x =>
+      JSON.stringify(x).match(new RegExp(filter, "i"))
+    );
+  }
+
   const thead = (
     <thead>
       <tr>
@@ -201,13 +213,26 @@ export default function RecordTable({
   );
 
   return (
-    <PaginatedTable
-      thead={thead}
-      tbody={tbody}
-      dataLoaded={recordsLoaded}
-      colSpan={displayFields.length + 2}
-      hasNextPage={hasNextRecords}
-      listNextPage={listNextRecords}
-    />
+    <>
+      <input
+        type="text"
+        className="form-control"
+        placeholder="Quicksearch"
+        onChange={onFilterChange}
+        value={filter}
+        style={{
+          marginBottom: "-0.5em",
+        }}
+        data-testid="quickFilter"
+      />
+      <PaginatedTable
+        thead={thead}
+        tbody={tbody}
+        dataLoaded={recordsLoaded}
+        colSpan={displayFields.length + 2}
+        hasNextPage={hasNextRecords}
+        listNextPage={listNextRecords}
+      />
+    </>
   );
 }
diff --git a/test/components/CollectionRecords_test.tsx b/test/components/CollectionRecords_test.tsx
@@ -1,6 +1,6 @@
 import CollectionRecords from "@src/components/collection/CollectionRecords";
 import { renderWithProvider } from "@test/testUtils";
-import { screen } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
 import React from "react";
 
 describe("CollectionRecords component", () => {
@@ -129,6 +129,27 @@ describe("CollectionRecords component", () => {
       expect(screen.getByTestId("id1-foo").textContent).toBe("bar");
       expect(screen.getByTestId("id2-foo").textContent).toBe("baz");
     });
+
+    it("should apply live filtering", () => {
+      let quickFilter = screen.getByTestId("quickFilter");
+      fireEvent.change(quickFilter, {
+        target: { value: "bar" },
+      });
+      expect(screen.getByTestId("id1-row")).toBeDefined();
+      expect(screen.queryByTestId("id2-row")).toBeNull();
+
+      fireEvent.change(quickFilter, {
+        target: { value: "baz" },
+      });
+      expect(screen.getByTestId("id2-row")).toBeDefined();
+      expect(screen.queryByTestId("id1-row")).toBeNull();
+
+      fireEvent.change(quickFilter, {
+        target: { value: "" },
+      });
+      expect(screen.getByTestId("id1-row")).toBeDefined();
+      expect(screen.queryByTestId("id2-row")).toBeDefined();
+    });
   });
 
   describe("No schema defined", () => {