From 123ed46caa5b5bda9818f3de4e8c9807c1869818 Mon Sep 17 00:00:00 2001 From: Carlos Feria Date: Tue, 19 Nov 2024 12:26:49 +0100 Subject: [PATCH] feat: persist search table filters in the browser urls (#252) --- client/src/app/Constants.ts | 3 ++- .../pages/advisory-list/advisory-context.tsx | 8 ++++++-- .../app/pages/package-list/package-context.tsx | 8 ++++++-- .../src/app/pages/sbom-list/sbom-context.tsx | 8 ++++++-- client/src/app/pages/search/search.tsx | 18 +++++++++++------- .../vulnerability-context.tsx | 8 ++++++-- 6 files changed, 37 insertions(+), 16 deletions(-) diff --git a/client/src/app/Constants.ts b/client/src/app/Constants.ts index ca94d051..658c0104 100644 --- 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 index 879e2a17..5dce3580 100644 --- 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 index fe250b04..676de27d 100644 --- 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 index d6773a5b..d52221cc 100644 --- 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 = ({ const tableControlState = useTableControlState({ tableName: "sbom", persistenceKeyPrefix: TablePersistenceKeyPrefixes.sboms, + persistTo: "urlParams", columnNames: { name: "Name", version: "Version", @@ -62,7 +66,7 @@ export const SbomSearchProvider: 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/search/search.tsx b/client/src/app/pages/search/search.tsx index feaf61eb..596500c4 100644 --- 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 index ec2eb929..a28916b4 100644 --- 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,