From 012cfb0f66dd9281e06ab7e5bdcc0fa4eca80cc9 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Fri, 14 Jun 2024 11:34:28 +0300 Subject: [PATCH] fix: fix config changes filter by cell issues around encoding and colons Fixes #1970 fix: switch to post for catalog changes, instead of get fix: envode value and symbol fix: incorrect encoding issues --- src/api/services/configs.ts | 53 +++++++++---------- .../ConfigChangesFilters.tsx | 9 ++-- src/ui/DataTable/FilterByCellValue.tsx | 4 +- src/ui/Dropdowns/TristateReactSelect.tsx | 10 ++-- 4 files changed, 41 insertions(+), 35 deletions(-) diff --git a/src/api/services/configs.ts b/src/api/services/configs.ts index 42e8521ed..ecaa2d4fb 100644 --- a/src/api/services/configs.ts +++ b/src/api/services/configs.ts @@ -236,9 +236,9 @@ export async function getConfigsChanges({ arbitraryFilter, tags }: GetConfigsRelatedChangesParams) { - const queryParams = new URLSearchParams(); + const requestData = new Map(); if (id) { - queryParams.set("id", id); + requestData.set("id", id); } if (configTypes && configTypes !== "all") { const value = tristateOutputToQueryParamValue(configTypes) @@ -246,42 +246,45 @@ export async function getConfigsChanges({ .map((v) => v.replaceAll("__", "::")) .join(","); if (value) { - queryParams.set("config_type", value); + requestData.set("config_type", value); } } else if (configType) { // if configTypes is not provided, use configType which is a single value - queryParams.set("config_type", configType); + requestData.set("config_type", configType); } if (changeType && changeType !== "all") { - const value = tristateOutputToQueryParamValue(changeType); + const value = tristateOutputToQueryParamValue(changeType, false); if (value) { - queryParams.set("type", value); + requestData.set("type", value); } } if (arbitraryFilter) { Object.entries(arbitraryFilter).forEach(([key, value]) => { - const filterExpression = tristateOutputToQueryParamValue(value, false); + const filterExpression = tristateOutputToQueryParamValue( + value, + key === "summary" || key === "source" + ); if (filterExpression) { - queryParams.set(key, filterExpression); + requestData.set(key, filterExpression); } }); } if (from) { - queryParams.set("from", from); + requestData.set("from", from); } if (to) { - queryParams.set("to", to); + requestData.set("to", to); } if (severity) { - queryParams.set("severity", severity); + requestData.set("severity", severity); } if (page && pageSize) { - queryParams.set("page", page); - queryParams.set("page_size", pageSize); + requestData.set("page", parseInt(page)); + requestData.set("page_size", parseInt(pageSize)); } if (sortBy) { // for descending order, we need to add a "-" before the sortBy field - queryParams.set("sort_by", `${sortOrder === "desc" ? "-" : ""}${sortBy}`); + requestData.set("sort_by", `${sortOrder === "desc" ? "-" : ""}${sortBy}`); } if (tags) { // we want to convert the tags array to a string of key=[1,2,3] @@ -300,30 +303,26 @@ export async function getConfigsChanges({ const equalSign = exclude ? "!" : ""; return `${key}${equalSign}=${values[0]}`; }); - queryParams.set("tags", tagList.join(",")); + requestData.set("tags", tagList.join(",")); } if (type_filter) { - queryParams.set( + requestData.set( "recursive", type_filter === "all" || type_filter === "none" ? "all" : type_filter ); } else { // default to all - queryParams.set("recursive", "all"); - queryParams.set("depth", "1"); + requestData.set("recursive", "all"); + requestData.set("depth", 1); } if (severity) { - queryParams.set("severity", severity); + requestData.set("severity", severity); } - queryParams.set( - "include_deleted_configs", - include_deleted_configs.toString() - ); - - const res = await Catalog.get( - `/changes?${queryParams}`, - {} + requestData.set("include_deleted_configs", include_deleted_configs); + const res = await Catalog.post( + `/changes`, + Object.fromEntries(requestData) ); return res.data ?? []; } diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx index 05718b14a..63614dbc1 100644 --- a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx +++ b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx @@ -23,9 +23,7 @@ function FilterBadge({ filters, paramKey }: FilterBadgeProps) { (key: string, value: string) => { const currentValue = params.get(key); const arrayValue = currentValue?.split(",") || []; - const newValues = arrayValue.filter( - (v) => decodeURIComponent(v) !== decodeURIComponent(value) - ); + const newValues = arrayValue.filter((v) => v !== value); if (newValues.length === 0) { params.delete(key); } else { @@ -53,7 +51,10 @@ function FilterBadge({ filters, paramKey }: FilterBadgeProps) { {paramKey === "external_created_by" ? "created_by" : paramKey}: - {decodeURIComponent(filter.split(":")[0])} + {filter + .split(":")[0] + .replaceAll("____", ":") + .replaceAll("||||", ",")} {filter.split(":")[1] === "-1" && } diff --git a/src/ui/DataTable/FilterByCellValue.tsx b/src/ui/DataTable/FilterByCellValue.tsx index 39f2cc7fc..835ae8d41 100644 --- a/src/ui/DataTable/FilterByCellValue.tsx +++ b/src/ui/DataTable/FilterByCellValue.tsx @@ -35,7 +35,9 @@ export default function FilterByCellValue({ // append the new value const updateValue = newValues .concat( - `${encodeURIComponent(filterValue)}:${action === "include" ? 1 : -1}` + `${filterValue.replaceAll(",", "||||").replaceAll(":", "____")}:${ + action === "include" ? 1 : -1 + }` ) // remove duplicates .filter((value, index, self) => self.indexOf(value) === index) diff --git a/src/ui/Dropdowns/TristateReactSelect.tsx b/src/ui/Dropdowns/TristateReactSelect.tsx index 610b8433e..2eac360a3 100644 --- a/src/ui/Dropdowns/TristateReactSelect.tsx +++ b/src/ui/Dropdowns/TristateReactSelect.tsx @@ -61,9 +61,13 @@ export function tristateOutputToQueryParamValue( .map((type) => { const [changeType, symbol] = type.split(":"); const symbolFilter = symbol?.toString() === "-1" ? "!" : ""; - return `${symbolFilter}${ - encodeValue ? encodeURIComponent(changeType) : changeType - }`; + const filterValue = changeType + .replaceAll("____", ":") + .replaceAll("||||", ","); + if (encodeValue) { + return encodeURIComponent(`${symbolFilter}${filterValue}`); + } + return `${symbolFilter}${filterValue}`; }) .join(","); }