🐛 Broken search string when navigating from deps page

Signed-off-by: ibolton336 <[email protected]>
konveyor · Jan 16, 2024 · f567265 · f567265
1 parent 2ea144d
commit f567265
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/client/src/app/layout/SidebarApp/SidebarApp.tsx b/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>

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/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} />

diff --git a/client/src/app/pages/dependencies/dependencies.tsx b/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}>