From 0fafc19c1152011703f938115cd91d605a6ad911 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
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
---
 src/api/services/configs.ts                              | 8 +++++++-
 .../ConfigChangesFilters/ConfigChangesFilters.tsx        | 9 +++++----
 src/ui/DataTable/FilterByCellValue.tsx                   | 4 +++-
 src/ui/Dropdowns/TristateReactSelect.tsx                 | 6 +++++-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/api/services/configs.ts b/src/api/services/configs.ts
index 42e8521ed..90d347f11 100644
--- a/src/api/services/configs.ts
+++ b/src/api/services/configs.ts
@@ -262,7 +262,13 @@ export async function getConfigsChanges({
     Object.entries(arbitraryFilter).forEach(([key, value]) => {
       const filterExpression = tristateOutputToQueryParamValue(value, false);
       if (filterExpression) {
-        queryParams.set(key, filterExpression);
+        // we need to encode the filter expression, as it might contain special
+        // characters
+        const value =
+          key === "summary" || key === "source"
+            ? encodeURIComponent(filterExpression)
+            : filterExpression;
+        queryParams.set(key, value);
       }
     });
   }
diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
index be1097649..e2c346c71 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 {
@@ -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
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 38809f260..88530c0f0 100644
--- 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(",");