Properly serialize & deserialize filters to match server side impleme…

…ntation
konveyor · Nov 27, 2023 · 1ff3205 · 1ff3205
1 parent d604498
commit 1ff3205
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -68,7 +68,10 @@ import WarningTriangleIcon from "@patternfly/react-icons/dist/esm/icons/warning-
 
 // Hooks
 import { useIsFetching, useQueryClient } from "@tanstack/react-query";
-import { useLocalTableControls } from "@app/hooks/table-controls";
+import {
+  deserializeFilterUrlParams,
+  useLocalTableControls,
+} from "@app/hooks/table-controls";
 
 // Queries
 import { Application, Assessment, Ref, Task } from "@app/api/models";
@@ -304,6 +307,12 @@ export const ApplicationsTable: React.FC = () => {
       console.error("Error while deleting review:", error);
     }
   };
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const filters = urlParams.get("filters");
+
+  const deserializedFilterValues = deserializeFilterUrlParams({ filters });
+
   const tableControls = useLocalTableControls({
     idProperty: "id",
     items: applications || [],
@@ -322,15 +331,7 @@ export const ApplicationsTable: React.FC = () => {
     isActiveItemEnabled: true,
     sortableColumns: ["name", "businessService", "tags", "effort"],
     initialSort: { columnKey: "name", direction: "asc" },
-    initialFilterValues: {
-      name: ["new app"],
-      // archetypes: [],
-      // businessService: "",
-      // identities: [],
-      // repository: "",
-      // binary: "",
-      // tags: [],
-    },
+    initialFilterValues: deserializedFilterValues,
     getSortValues: (app) => ({
       name: app.name,
       businessService: app.businessService?.name || "",

diff --git a/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx b/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx
@@ -9,9 +9,14 @@ import {
   ConditionalTableBody,
   TableRowContentWithControls,
 } from "@app/components/TableControls";
-import { useLocalTableControls } from "@app/hooks/table-controls";
+import {
+  serializeFilterUrlParams,
+  useLocalTableControls,
+} from "@app/hooks/table-controls";
 import { SimplePagination } from "@app/components/SimplePagination";
 import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core";
+import { Link } from "react-router-dom";
+import { Paths } from "@app/Paths";
 
 export interface IIdentifiedRisksTableProps {}
 
@@ -198,7 +203,13 @@ export const IdentifiedRisksTable: React.FC<
                       {item.answer ?? "N/A"}
                     </Td>
                     <Td {...getTdProps({ columnKey: "applications" })}>
-                      {item?.applications.length ?? "N/A"}
+                      {item?.applications.length ? (
+                        <Link to={getApplicationsUrl(item?.applications)}>
+                          {item.applications.length}
+                        </Link>
+                      ) : (
+                        "N/A"
+                      )}
                     </Td>
                   </TableRowContentWithControls>
                 </Tr>
@@ -210,3 +221,16 @@ export const IdentifiedRisksTable: React.FC<
     </>
   );
 };
+
+const getApplicationsUrl = (applications: Ref[]) => {
+  const filterValues = {
+    name: applications.map((app) => app.name),
+  };
+
+  const serializedParams = serializeFilterUrlParams(filterValues);
+
+  const queryString = serializedParams.filters
+    ? `filters=${serializedParams.filters}`
+    : "";
+  return `${Paths.applications}?${queryString}`;
+};