feat: persist search table filters in the browser urls (#252)

trustification · Nov 19, 2024 · 123ed46 · 123ed46
1 parent 4aa315b
commit 123ed46
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 16 deletions.
diff --git a/client/src/app/Constants.ts b/client/src/app/Constants.ts
@@ -1,5 +1,7 @@
 import ENV from "./env";
 
+export const FILTER_TEXT_CATEGORY_KEY = "";
+
 export const RENDER_DATE_FORMAT = "MMM DD, YYYY";
 export const RENDER_DATETIME_FORMAT = "MMM DD, YYYY | HH:mm:ss";
 export const FILTER_DATE_FORMAT = "YYYY-MM-DD";
@@ -11,7 +13,6 @@ export const TablePersistenceKeyPrefixes = {
   sboms: "sb",
   sboms_by_package: "sbk",
   packages: "pk",
-  sbom_packages: "spk",
 };
 
 // URL param prefixes: should be short, must be unique for each table that uses one

diff --git a/client/src/app/pages/advisory-list/advisory-context.tsx b/client/src/app/pages/advisory-list/advisory-context.tsx
@@ -4,7 +4,10 @@ import { AxiosError } from "axios";
 
 import { AdvisorySummary } from "@app/client";
 import { FilterType } from "@app/components/FilterToolbar";
-import { TablePersistenceKeyPrefixes } from "@app/Constants";
+import {
+  FILTER_TEXT_CATEGORY_KEY,
+  TablePersistenceKeyPrefixes,
+} from "@app/Constants";
 import {
   getHubRequestParams,
   ITableControls,
@@ -43,6 +46,7 @@ export const AdvisorySearchProvider: React.FunctionComponent<
   const tableControlState = useTableControlState({
     tableName: "advisory",
     persistenceKeyPrefix: TablePersistenceKeyPrefixes.advisories,
+    persistTo: "urlParams",
     columnNames: {
       identifier: "ID",
       title: "Title",
@@ -56,7 +60,7 @@ export const AdvisorySearchProvider: React.FunctionComponent<
     isFilterEnabled: true,
     filterCategories: [
       {
-        categoryKey: "",
+        categoryKey: FILTER_TEXT_CATEGORY_KEY,
         title: "Filter text",
         placeholderText: "Search",
         type: FilterType.search,

diff --git a/client/src/app/pages/package-list/package-context.tsx b/client/src/app/pages/package-list/package-context.tsx
@@ -5,7 +5,10 @@ import { AxiosError } from "axios";
 import { DecomposedPurl } from "@app/api/models";
 import { PurlSummary } from "@app/client";
 import { FilterType } from "@app/components/FilterToolbar";
-import { TablePersistenceKeyPrefixes } from "@app/Constants";
+import {
+  FILTER_TEXT_CATEGORY_KEY,
+  TablePersistenceKeyPrefixes,
+} from "@app/Constants";
 import {
   getHubRequestParams,
   ITableControls,
@@ -55,6 +58,7 @@ export const PackageSearchProvider: React.FunctionComponent<
   const tableControlState = useTableControlState({
     tableName: "packages",
     persistenceKeyPrefix: TablePersistenceKeyPrefixes.packages,
+    persistTo: "urlParams",
     columnNames: {
       name: "Name",
       namespace: "Namespace",
@@ -70,7 +74,7 @@ export const PackageSearchProvider: React.FunctionComponent<
     isFilterEnabled: true,
     filterCategories: [
       {
-        categoryKey: "",
+        categoryKey: FILTER_TEXT_CATEGORY_KEY,
         title: "Filter text",
         placeholderText: "Search",
         type: FilterType.search,

diff --git a/client/src/app/pages/sbom-list/sbom-context.tsx b/client/src/app/pages/sbom-list/sbom-context.tsx
@@ -4,7 +4,10 @@ import { AxiosError } from "axios";
 
 import { SbomSummary } from "@app/client";
 import { FilterType } from "@app/components/FilterToolbar";
-import { TablePersistenceKeyPrefixes } from "@app/Constants";
+import {
+  FILTER_TEXT_CATEGORY_KEY,
+  TablePersistenceKeyPrefixes,
+} from "@app/Constants";
 import {
   getHubRequestParams,
   ITableControls,
@@ -48,6 +51,7 @@ export const SbomSearchProvider: React.FunctionComponent<ISbomProvider> = ({
   const tableControlState = useTableControlState({
     tableName: "sbom",
     persistenceKeyPrefix: TablePersistenceKeyPrefixes.sboms,
+    persistTo: "urlParams",
     columnNames: {
       name: "Name",
       version: "Version",
@@ -62,7 +66,7 @@ export const SbomSearchProvider: React.FunctionComponent<ISbomProvider> = ({
     isFilterEnabled: true,
     filterCategories: [
       {
-        categoryKey: "",
+        categoryKey: FILTER_TEXT_CATEGORY_KEY,
         title: "Filter text",
         placeholderText: "Search",
         type: FilterType.search,

diff --git a/client/src/app/pages/search/search.tsx b/client/src/app/pages/search/search.tsx
@@ -24,17 +24,18 @@ import {
 import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 
 import { FilterPanel } from "@app/components/FilterPanel";
+import { FILTER_TEXT_CATEGORY_KEY } from "@app/Constants";
 
 import { SearchProvider } from "./search-context";
 
+import { AdvisorySearchContext } from "../advisory-list/advisory-context";
+import { AdvisoryTable } from "../advisory-list/advisory-table";
 import { PackageSearchContext } from "../package-list/package-context";
 import { PackageTable } from "../package-list/package-table";
 import { SbomSearchContext } from "../sbom-list/sbom-context";
 import { SbomTable } from "../sbom-list/sbom-table";
 import { VulnerabilitySearchContext } from "../vulnerability-list/vulnerability-context";
 import { VulnerabilityTable } from "../vulnerability-list/vulnerability-table";
-import { AdvisorySearchContext } from "../advisory-list/advisory-context";
-import { AdvisoryTable } from "../advisory-list/advisory-table";
 
 export const SearchPage: React.FC = () => {
   return (
@@ -86,7 +87,10 @@ export const Search: React.FC = () => {
 
   // Search
 
-  const [searchValue, setSearchValue] = React.useState("");
+  const [searchValue, setSearchValue] = React.useState(
+    sbomTableControls.filterState.filterValues[FILTER_TEXT_CATEGORY_KEY]?.[0] ||
+      ""
+  );
 
   const onChangeSearchValue = (value: string) => {
     setSearchValue(value);
@@ -99,19 +103,19 @@ export const Search: React.FC = () => {
   const onChangeContextSearchValue = () => {
     sbomTableControls.filterState.setFilterValues({
       ...sbomTableControls.filterState.filterValues,
-      "": [searchValue],
+      [FILTER_TEXT_CATEGORY_KEY]: [searchValue],
     });
     packageTableControls.filterState.setFilterValues({
       ...packageTableControls.filterState.filterValues,
-      "": [searchValue],
+      [FILTER_TEXT_CATEGORY_KEY]: [searchValue],
     });
     vulnerabilityTableControls.filterState.setFilterValues({
       ...vulnerabilityTableControls.filterState.filterValues,
-      "": [searchValue],
+      [FILTER_TEXT_CATEGORY_KEY]: [searchValue],
     });
     advisoryTableControls.filterState.setFilterValues({
       ...advisoryTableControls.filterState.filterValues,
-      "": [searchValue],
+      [FILTER_TEXT_CATEGORY_KEY]: [searchValue],
     });
   };
 

diff --git a/client/src/app/pages/vulnerability-list/vulnerability-context.tsx b/client/src/app/pages/vulnerability-list/vulnerability-context.tsx
@@ -4,7 +4,10 @@ import { AxiosError } from "axios";
 
 import { VulnerabilitySummary } from "@app/client";
 import { FilterType } from "@app/components/FilterToolbar";
-import { TablePersistenceKeyPrefixes } from "@app/Constants";
+import {
+  FILTER_TEXT_CATEGORY_KEY,
+  TablePersistenceKeyPrefixes,
+} from "@app/Constants";
 import {
   getHubRequestParams,
   ITableControls,
@@ -43,6 +46,7 @@ export const VulnerabilitySearchProvider: React.FunctionComponent<
   const tableControlState = useTableControlState({
     tableName: "vulnerability",
     persistenceKeyPrefix: TablePersistenceKeyPrefixes.vulnerabilities,
+    persistTo: "urlParams",
     columnNames: {
       identifier: "ID",
       title: "Description",
@@ -56,7 +60,7 @@ export const VulnerabilitySearchProvider: React.FunctionComponent<
     isFilterEnabled: true,
     filterCategories: [
       {
-        categoryKey: "",
+        categoryKey: FILTER_TEXT_CATEGORY_KEY,
         title: "Filter text",
         placeholderText: "Search",
         type: FilterType.search,