From 7ec3cfbfe10c93eae8f97fcda34ae57a5a4057f5 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 4 Jan 2023 16:41:15 +0000
Subject: [PATCH] add bookmarkability for search query filtering on hosts
 (#9067) (#9182)

---
 changes/ui-hackathon-filtering                              | 1 +
 frontend/components/TableContainer/TableContainer.tsx       | 6 +++++-
 .../components/forms/fields/SearchField/SearchField.tsx     | 4 +++-
 frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx    | 1 +
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 changes/ui-hackathon-filtering

diff --git a/changes/ui-hackathon-filtering b/changes/ui-hackathon-filtering
new file mode 100644
index 0000000000..943d15f944
--- /dev/null
+++ b/changes/ui-hackathon-filtering
@@ -0,0 +1 @@
+- adds bookmarkability of url when it includes the `query` query param on the manage hosts page.
diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx
index 9099a172a4..5ee4cbe5de 100644
--- a/frontend/components/TableContainer/TableContainer.tsx
+++ b/frontend/components/TableContainer/TableContainer.tsx
@@ -34,6 +34,7 @@ interface ITableContainerProps {
   manualSortBy?: boolean;
   defaultSortHeader?: string;
   defaultSortDirection?: string;
+  defaultSearchQuery?: string;
   actionButtonText?: string;
   actionButtonIcon?: string;
   actionButtonVariant?: ButtonVariant;
@@ -97,6 +98,7 @@ const TableContainer = ({
   filters,
   isLoading,
   manualSortBy = false,
+  defaultSearchQuery = "",
   defaultSortHeader = "name",
   defaultSortDirection = "asc",
   inputPlaceHolder = "Search",
@@ -143,7 +145,7 @@ const TableContainer = ({
   setExportRows,
   resetPageIndex,
 }: ITableContainerProps): JSX.Element => {
-  const [searchQuery, setSearchQuery] = useState("");
+  const [searchQuery, setSearchQuery] = useState(defaultSearchQuery);
   const [sortHeader, setSortHeader] = useState(defaultSortHeader || "");
   const [sortDirection, setSortDirection] = useState(
     defaultSortDirection || ""
@@ -269,6 +271,7 @@ const TableContainer = ({
         <div className={`${baseClass}__search-input wide-search`}>
           <SearchField
             placeholder={inputPlaceHolder}
+            defaultValue={searchQuery}
             onChange={onSearchQueryChange}
           />
         </div>
@@ -350,6 +353,7 @@ const TableContainer = ({
               >
                 <SearchField
                   placeholder={inputPlaceHolder}
+                  defaultValue={searchQuery}
                   onChange={onSearchQueryChange}
                 />
               </div>
diff --git a/frontend/components/forms/fields/SearchField/SearchField.tsx b/frontend/components/forms/fields/SearchField/SearchField.tsx
index 2eaf1697cf..27d8c62d69 100644
--- a/frontend/components/forms/fields/SearchField/SearchField.tsx
+++ b/frontend/components/forms/fields/SearchField/SearchField.tsx
@@ -7,14 +7,16 @@ const baseClass = "search-field";
 
 export interface ISearchFieldProps {
   placeholder: string;
+  defaultValue?: string;
   onChange: (value: string) => void;
 }
 
 const SearchField = ({
   placeholder,
+  defaultValue = "",
   onChange,
 }: ISearchFieldProps): JSX.Element => {
-  const [searchQueryInput, setSearchQueryInput] = useState("");
+  const [searchQueryInput, setSearchQueryInput] = useState(defaultValue);
 
   const debouncedOnChange = useDebouncedCallback((newValue: string) => {
     onChange(newValue);
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index b9ce68d5e5..a23b395047 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -1716,6 +1716,7 @@ const ManageHostsPage = ({
         defaultSortDirection={
           (sortBy[0] && sortBy[0].direction) || DEFAULT_SORT_DIRECTION
         }
+        defaultSearchQuery={searchQuery}
         pageSize={100}
         actionButtonText={"Edit columns"}
         actionButtonIcon={EditColumnsIcon}