Manage policies page: Add search functionality (#10967)

frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { AppContext } from "context/app";
 import { noop } from "lodash";
 import paths from "router/paths";
@@ -9,7 +9,7 @@ import { IEmptyTableProps } from "interfaces/empty_table";
 
 import Button from "components/buttons/Button";
 import Spinner from "components/Spinner";
-import TableContainer from "components/TableContainer";
+import TableContainer, { ITableQueryData } from "components/TableContainer";
 import EmptyTable from "components/EmptyTable";
 import { generateTableHeaders, generateDataSet } from "./PoliciesTableConfig";
 
@@ -46,6 +46,12 @@ const PoliciesTable = ({
 
   const { config } = useContext(AppContext);
 
+  const [searchString, setSearchString] = useState("");
+
+  const handleSearchChange = ({ searchQuery }: ITableQueryData) => {
+    setSearchString(searchQuery);
+  };
+
   const emptyState = () => {
     const emptyPolicies: IEmptyTableProps = {
       iconName: "empty-policies",
@@ -90,10 +96,19 @@ const PoliciesTable = ({
         </Button>
       );
     }
+    if (searchString) {
+      delete emptyPolicies.iconName;
+      delete emptyPolicies.primaryButton;
+      emptyPolicies.header = "No policies match the current search criteria.";
+      emptyPolicies.info =
+        "Expecting to see policies? Try again in a few seconds as the system catches up.";
+    }
 
     return emptyPolicies;
   };
 
+  const searchable = !(policiesList?.length === 0 && searchString === "");
+
   return (
     <div
       className={`${baseClass} ${
@@ -134,9 +149,13 @@ const PoliciesTable = ({
               primaryButton: emptyState().primaryButton,
             })
           }
-          onQueryChange={noop}
           disableCount={tableType === "inheritedPolicies"}
           isClientSidePagination
+          isClientSideFilter
+          searchQueryColumn="name"
+          onQueryChange={handleSearchChange}
+          inputPlaceHolder="Search by name"
+          searchable={searchable}
         />
       )}
     </div>