✨ Add url filter to drawer results for dependency apps

Make sure filters are clearable when used as initial values from url

Signed-off-by: Ian Bolton <[email protected]>

client/src/app/hooks/table-controls/filtering/useFilterState.ts

@@ -4,6 +4,7 @@ import { usePersistentState } from "@app/hooks/usePersistentState";
 import { serializeFilterUrlParams } from "./helpers";
 import { deserializeFilterUrlParams } from "./helpers";
 import { DiscriminatedArgs } from "@app/utils/type-utils";
+import { useEffect, useState } from "react";
 
 /**
  * The "source of truth" state for the filter feature.
@@ -64,9 +65,22 @@ export const useFilterState = <
 ): IFilterState<TFilterCategoryKey> => {
   const { isFilterEnabled, persistTo = "state", persistenceKeyPrefix } = args;
 
-  const initialFilterValues: IFilterValues<TFilterCategoryKey> = isFilterEnabled
-    ? args?.initialFilterValues ?? {}
-    : {};
+  // We need to know if it's the initial load to avoid overwriting changes to the filter values
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+
+  let initialFilterValues = {};
+
+  if (isInitialLoad) {
+    initialFilterValues = isFilterEnabled
+      ? args?.initialFilterValues ?? {}
+      : {};
+  }
+
+  useEffect(() => {
+    if (isInitialLoad) {
+      setIsInitialLoad(false);
+    }
+  }, [isInitialLoad]);
 
   // We won't need to pass the latter two type params here if TS adds support for partial inference.
   // See https://github.com/konveyor/tackle2-ui/issues/1456

client/src/app/pages/dependencies/dependency-apps-table.tsx

@@ -15,6 +15,7 @@ import {
   useTableControlState,
   useTableControlProps,
   getHubRequestParams,
+  deserializeFilterUrlParams,
 } from "@app/hooks/table-controls";
 import { TablePersistenceKeyPrefix } from "@app/Constants";
 import {
@@ -30,6 +31,7 @@ import { useFetchBusinessServices } from "@app/queries/businessservices";
 import { useFetchTagsWithTagItems } from "@app/queries/tags";
 import { getParsedLabel } from "@app/utils/rules-utils";
 import { extractFirstSha } from "@app/utils/utils";
+import { useHistory } from "react-router-dom";
 
 export interface IDependencyAppsTableProps {
   dependency: AnalysisDependency;
@@ -39,9 +41,15 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
   dependency,
 }) => {
   const { t } = useTranslation();
+  const history = useHistory();
+
   const { businessServices } = useFetchBusinessServices();
   const { tagItems } = useFetchTagsWithTagItems();
 
+  const urlParams = new URLSearchParams(window.location.search);
+  const filters = urlParams.get("filters");
+  const deserializedFilterValues = deserializeFilterUrlParams({ filters });
+
   const tableControlState = useTableControlState({
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.dependencyApplications,
@@ -56,9 +64,10 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
     isPaginationEnabled: true,
     sortableColumns: ["name", "version"],
     initialSort: { columnKey: "name", direction: "asc" },
+    initialFilterValues: deserializedFilterValues,
     filterCategories: [
       {
-        key: "name",
+        key: "application.name",
         title: "Application Name",
         type: FilterType.search,
         placeholderText:
@@ -147,9 +156,19 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
     },
   } = tableControls;
 
+  const clearFilters = () => {
+    const currentPath = history.location.pathname;
+    const newSearch = new URLSearchParams(history.location.search);
+    newSearch.delete("filters");
+    history.push(`${currentPath}`);
+  };
   return (
     <>
-      <Toolbar {...toolbarProps} className={spacing.mtSm}>
+      <Toolbar
+        {...toolbarProps}
+        className={spacing.mtSm}
+        clearAllFilters={clearFilters}
+      >
         <ToolbarContent>
           <FilterToolbar {...filterToolbarProps} />
           <ToolbarItem {...paginationToolbarItemProps}>