From d2f2015ebf5809cbb73f7593470fd47abe25be7d Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Thu, 6 Jun 2024 22:45:52 +0300
Subject: [PATCH] fix: fix config changes filter by cell issues around encoding
 and colons

Fixes #1970
---
 .../Changes/ConfigChangesFilters/ConfigChangesFilters.tsx   | 6 ++----
 src/ui/DataTable/FilterByCellValue.tsx                      | 4 +++-
 src/ui/Dropdowns/TristateReactSelect.tsx                    | 4 +++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
index 8d1bfdbe7..ea4a89c47 100644
--- a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
+++ b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
@@ -22,9 +22,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 {
@@ -50,7 +48,7 @@ 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("____", ":")}
           </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..30342554f 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(":", "____")}:${
+            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 16ddb222e..c226fb875 100644
--- a/src/ui/Dropdowns/TristateReactSelect.tsx
+++ b/src/ui/Dropdowns/TristateReactSelect.tsx
@@ -62,7 +62,9 @@ export function tristateOutputToQueryParamValue(
       const [changeType, symbol] = type.split(":");
       const symbolFilter = symbol?.toString() === "-1" ? "!" : "";
       return `${symbolFilter}${
-        encodeValue ? encodeURIComponent(changeType) : changeType
+        encodeValue
+          ? encodeURIComponent(changeType.replaceAll("____", ":"))
+          : changeType.replaceAll("____", ":")
       }`;
     })
     .join(",");