From d46e74587c1a12adbbc189835c43e50cc3b1ef09 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Tue, 22 Oct 2024 12:48:10 +0300
Subject: [PATCH] fix:  fix filter by health and status not working

Fixes #2364
---
 src/api/query-hooks/index.ts             |  8 +++-----
 src/ui/Dropdowns/TristateReactSelect.tsx | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/api/query-hooks/index.ts b/src/api/query-hooks/index.ts
index 260c41812..3e1d4abfb 100644
--- a/src/api/query-hooks/index.ts
+++ b/src/api/query-hooks/index.ts
@@ -1,4 +1,4 @@
-import { tristateOutputToQueryFilterParam } from "@flanksource-ui/ui/Dropdowns/TristateReactSelect";
+import { setTristateOutputToQueryFilterToURLSearchParam } from "@flanksource-ui/ui/Dropdowns/TristateReactSelect";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 import { isNull } from "lodash";
 import { toastError } from "../../components/Toast/toast";
@@ -193,13 +193,11 @@ export function prepareConfigListQuery({
   }
 
   if (status && status !== "All") {
-    const statusParam = tristateOutputToQueryFilterParam(status, "status");
-    query.append("status", statusParam);
+    setTristateOutputToQueryFilterToURLSearchParam(query, status, "status");
   }
 
   if (health) {
-    const healthParam = tristateOutputToQueryFilterParam(health, "health");
-    query.append("health", healthParam);
+    setTristateOutputToQueryFilterToURLSearchParam(query, health, "health");
   }
 
   if (search) {
diff --git a/src/ui/Dropdowns/TristateReactSelect.tsx b/src/ui/Dropdowns/TristateReactSelect.tsx
index 10d9525bc..be940196f 100644
--- a/src/ui/Dropdowns/TristateReactSelect.tsx
+++ b/src/ui/Dropdowns/TristateReactSelect.tsx
@@ -83,6 +83,20 @@ export function tristateOutputToQueryFilterParam(
   return `&${key}.filter=${paramValue}`;
 }
 
+export function setTristateOutputToQueryFilterToURLSearchParam(
+  searchParams: URLSearchParams,
+  param: string | undefined,
+  key: string
+) {
+  if (param === undefined) {
+    return "";
+  }
+  const paramValue = tristateOutputToQueryParamValue(param);
+  if (paramValue) {
+    searchParams.set(`${key}.filter`, paramValue);
+  }
+}
+
 type TriStateToggleState = {
   [key: string]: number;
 };