add bookmarkability for search query filtering on hosts (#9067) (#9182)

changes/ui-hackathon-filtering

@@ -0,0 +1 @@
+- adds bookmarkability of url when it includes the `query` query param on the manage hosts page.

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>

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);

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}