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

Fixes #1970
flanksource · Jun 6, 2024 · d2f2015 · d2f2015
1 parent 1ac61fe
commit d2f2015
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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(",");