🐛 Broken search string when navigating from deps page (#1662) (#1668)

Resolves: https://issues.redhat.com/browse/MTA-2007
Resolves: https://issues.redhat.com/browse/MTA-2056
Backport of #1662

- Removes the auto applied search string when direct navigating using
the side nav. This was applying filters that were not registered within
the application table ( & other tables). I.E when navigating from the
dependencies page, the search string was including an
"applications.name" filter which is just referenced as "name" within the
applications table. Future iterations may allow us to rewrite the search
string when navigating between pages or standardizing on a specific key
for app names on the back end.
- Adds the ability to parse the url string for initial search values in
the dependencies toolbar.
- Adds associated clear filters handler to clear the url when the
toolbar clear button is pressed. This is necessary to overwrite the
initial filter values. Implemented this in dependencies page &
applications table. There may be a need to incorporate this into filter
toolbar at some point.

Signed-off-by: ibolton336 <[email protected]>
Co-authored-by: Scott Dickerson <[email protected]>

Signed-off-by: ibolton336 <[email protected]>
Co-authored-by: Ian Bolton <[email protected]>
Co-authored-by: Scott Dickerson <[email protected]>
Signed-off-by: ibolton336 <[email protected]>

client/src/app/layout/SidebarApp/SidebarApp.tsx

@@ -77,26 +77,17 @@ export const SidebarApp: React.FC = () => {
           {selectedPersona === PersonaKey.MIGRATION ? (
             <NavList title="Global">
               <NavItem>
-                <NavLink
-                  to={Paths.applications + search}
-                  activeClassName="pf-m-current"
-                >
+                <NavLink to={Paths.applications} activeClassName="pf-m-current">
                   {t("sidebar.applicationInventory")}
                 </NavLink>
               </NavItem>
               <NavItem>
-                <NavLink
-                  to={Paths.archetypes + search}
-                  activeClassName="pf-m-current"
-                >
+                <NavLink to={Paths.archetypes} activeClassName="pf-m-current">
                   {t("sidebar.archetypes")}
                 </NavLink>
               </NavItem>
               <NavItem>
-                <NavLink
-                  to={Paths.reports + search}
-                  activeClassName="pf-m-current"
-                >
+                <NavLink to={Paths.reports} activeClassName="pf-m-current">
                   {t("sidebar.reports")}
                 </NavLink>
               </NavItem>

client/src/app/pages/applications/applications-table/applications-table.tsx

@@ -515,6 +515,14 @@ export const ApplicationsTable: React.FC = () => {
     selectionState: { selectedItems: selectedRows },
   } = tableControls;
 
+  const clearFilters = () => {
+    const currentPath = history.location.pathname;
+    const newSearch = new URLSearchParams(history.location.search);
+    newSearch.delete("filters");
+    history.push(`${currentPath}`);
+    filterToolbarProps.setFilterValues({});
+  };
+
   const [
     saveApplicationsCredentialsModalState,
     setSaveApplicationsCredentialsModalState,
@@ -732,7 +740,7 @@ export const ApplicationsTable: React.FC = () => {
           backgroundColor: "var(--pf-v5-global--BackgroundColor--100)",
         }}
       >
-        <Toolbar {...toolbarProps}>
+        <Toolbar {...toolbarProps} clearAllFilters={clearFilters}>
           <ToolbarContent>
             <ToolbarBulkSelector {...toolbarBulkSelectorProps} />
             <FilterToolbar<Application, string> {...filterToolbarProps} />

client/src/app/pages/dependencies/dependencies.tsx

@@ -17,6 +17,7 @@ import {
   useTableControlState,
   useTableControlProps,
   getHubRequestParams,
+  deserializeFilterUrlParams,
 } from "@app/hooks/table-controls";
 import { TablePersistenceKeyPrefix, UI_UNIQUE_ID } from "@app/Constants";
 import { SimplePagination } from "@app/components/SimplePagination";
@@ -30,13 +31,18 @@ import { useSelectionState } from "@migtools/lib-ui";
 import { DependencyAppsDetailDrawer } from "./dependency-apps-detail-drawer";
 import { useSharedAffectedApplicationFilterCategories } from "../issues/helpers";
 import { getParsedLabel } from "@app/utils/rules-utils";
+import { useHistory } from "react-router-dom";
 
 export const Dependencies: React.FC = () => {
   const { t } = useTranslation();
 
   const allAffectedApplicationsFilterCategories =
     useSharedAffectedApplicationFilterCategories();
 
+  const urlParams = new URLSearchParams(window.location.search);
+  const filters = urlParams.get("filters");
+  const deserializedFilterValues = deserializeFilterUrlParams({ filters });
+
   const tableControlState = useTableControlState({
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.dependencies,
@@ -46,6 +52,7 @@ export const Dependencies: React.FC = () => {
       provider: "Language",
       labels: "Labels",
     },
+    initialFilterValues: deserializedFilterValues,
     isFilterEnabled: true,
     isSortEnabled: true,
     isPaginationEnabled: true,
@@ -122,6 +129,15 @@ export const Dependencies: React.FC = () => {
     activeItemDerivedState: { activeItem, clearActiveItem },
   } = tableControls;
 
+  const history = useHistory();
+
+  const clearFilters = () => {
+    const currentPath = history.location.pathname;
+    const newSearch = new URLSearchParams(history.location.search);
+    newSearch.delete("filters");
+    history.push(`${currentPath}`);
+  };
+
   return (
     <>
       <PageSection variant={PageSectionVariants.light}>
@@ -135,7 +151,7 @@ export const Dependencies: React.FC = () => {
             backgroundColor: "var(--pf-v5-global--BackgroundColor--100)",
           }}
         >
-          <Toolbar {...toolbarProps}>
+          <Toolbar {...toolbarProps} clearAllFilters={clearFilters}>
             <ToolbarContent>
               <FilterToolbar {...filterToolbarProps} />
               <ToolbarItem {...paginationToolbarItemProps}>