From f1ae86d08543c76c6f9d22a4d90d6c06b2c8cd14 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Fri, 19 Jan 2024 11:30:05 -0500
Subject: [PATCH] :bug: Broken search string when navigating from deps page
 (#1662)

Resolves [[Dependencies]Application inventory page shows no applications
once Accessed from
dependencies](https://issues.redhat.com/browse/MTA-2007)
Resolves https://issues.redhat.com/browse/MTA-2056

- 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 <ibolton@redhat.com>
Co-authored-by: Scott Dickerson <sdickers@redhat.com>
Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../src/app/layout/SidebarApp/SidebarApp.tsx   | 15 +++------------
 .../applications-table/applications-table.tsx  | 10 +++++++++-
 .../app/pages/dependencies/dependencies.tsx    | 18 +++++++++++++++++-
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/client/src/app/layout/SidebarApp/SidebarApp.tsx b/client/src/app/layout/SidebarApp/SidebarApp.tsx
index 699a48c38e..dcabacf316 100644
--- 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
index 13d6b52ffe..de45d031ae 100644
--- 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
index 4c4d347656..f05e95c595 100644
--- 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,6 +31,7 @@ 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();
@@ -37,6 +39,10 @@ export const Dependencies: React.FC = () => {
   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}>