fix: fix config changes filter by cell issues around encoding and colons

Fixes #1970
flanksource · Jun 13, 2024 · 47a5a47 · 47a5a47
1 parent 7247c5f
commit 47a5a47
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git 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 {
@@ -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>

diff --git 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
@@ -62,7 +62,11 @@ export function tristateOutputToQueryParamValue(
       const [changeType, symbol] = type.split(":");
       const symbolFilter = symbol?.toString() === "-1" ? "!" : "";
       return `${symbolFilter}${
-        encodeValue ? encodeURIComponent(changeType) : changeType
+        encodeValue
+          ? encodeURIComponent(
+              changeType.replaceAll("____", ":").replaceAll("||||", ",")
+            )
+          : changeType.replaceAll("____", ":").replaceAll("||||", ",")
       }`;
     })
     .join(",");