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

src/api/services/configs.ts

@@ -236,52 +236,55 @@ export async function getConfigsChanges({
   arbitraryFilter,
   tags
 }: GetConfigsRelatedChangesParams) {
-  const queryParams = new URLSearchParams();
+  const requestData = new Map<string, any>();
   if (id) {
-    queryParams.set("id", id);
+    requestData.set("id", id);
   }
   if (configTypes && configTypes !== "all") {
     const value = tristateOutputToQueryParamValue(configTypes)
       ?.split(",")
       .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<CatalogChangesSearchResponse>(
-    `/changes?${queryParams}`,
-    {}
+  requestData.set("include_deleted_configs", include_deleted_configs);
+  const res = await Catalog.post<CatalogChangesSearchResponse>(
+    `/changes`,
+    Object.fromEntries(requestData)
   );
   return res.data ?? [];
 }

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 {
@@ -51,7 +49,10 @@ function FilterBadge({ filters, paramKey }: FilterBadgeProps) {
         >
           <span className="text-gray-500 font-semibold">{paramKey}:</span>
           <span className="text-gray-500">
-            {decodeURIComponent(filter.split(":")[0])}
+            {filter
+              .split(":")[0]
+              .replaceAll("____", ":")
+              .replaceAll("||||", ",")}
           </span>
           <span>{filter.split(":")[1] === "-1" && <FaBan />}</span>
         </ClosableBadge>

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)

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(",");
 }