From 4c0c80e7a99d85ac6b201f56c87bb22c23ea7b87 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 12 Feb 2024 15:44:34 -0500 Subject: [PATCH] :bug: 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 Co-authored-by: Scott Dickerson Signed-off-by: ibolton336 Co-authored-by: Ian Bolton Co-authored-by: Scott Dickerson Signed-off-by: ibolton336 --- .../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 ? ( - + {t("sidebar.applicationInventory")} - + {t("sidebar.archetypes")} - + {t("sidebar.reports")} 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)", }} > - + {...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 ( <> @@ -135,7 +151,7 @@ export const Dependencies: React.FC = () => { backgroundColor: "var(--pf-v5-global--BackgroundColor--100)", }} > - +