fix(instance-list) avoid conflict between filters and side panel params

canonical · Nov 16, 2023 · 5e4ff68 · 5e4ff68
1 parent 6dc24c1
commit 5e4ff68
Showing 1 changed file with 28 additions and 27 deletions.
diff --git a/src/pages/instances/InstanceSearchFilter.tsx b/src/pages/instances/InstanceSearchFilter.tsx
@@ -8,6 +8,8 @@ import {
 } from "@canonical/react-components/dist/components/SearchAndFilter/types";
 import { useSearchParams } from "react-router-dom";
 
+const QUERY_PARAMS = ["query", "status", "type", "profile"];
+
 interface Props {
   instances: LxdInstance[];
 }
@@ -44,50 +46,49 @@ const InstanceSearchFilter: FC<Props> = ({ instances }) => {
   ];
 
   const onSearchDataChange = (searchData: SearchAndFilterChip[]) => {
-    const searchTokensByLead = (lead: string) =>
+    const searchValuesByLead = (lead: string) =>
       searchData
         .filter(
           (chip) => chip.lead === lead || (lead === "query" && chip.quoteValue),
         )
         .map((chip) => chip.value);
 
-    const newParams = new URLSearchParams();
-    searchTokensByLead("query").forEach((query) => {
-      newParams.append("query", query);
-    });
-    searchTokensByLead("status").forEach((status) => {
-      newParams.append("status", status);
-    });
-    searchTokensByLead("type").forEach((type) => {
-      newParams.append("type", type);
-    });
-    searchTokensByLead("profile").forEach((profile) => {
-      newParams.append("profile", profile);
+    const newParams = new URLSearchParams(searchParams.toString());
+
+    QUERY_PARAMS.forEach((param) => {
+      newParams.delete(param);
+      searchValuesByLead(param).forEach((value) => {
+        if (!newParams.has(param, value)) {
+          newParams.append(param, value);
+        }
+      });
     });
 
     if (newParams.toString() !== searchParams.toString()) {
       setSearchParams(newParams);
     }
   };
 
-  const searchParamsToChips = (parameter: string) =>
-    searchParams
-      .getAll(parameter)
-      .map((value) =>
-        parameter === "query"
-          ? { quoteValue: true, value }
-          : { lead: parameter, value },
-      );
+  const searchParamsToChips = () => {
+    const searchData: SearchAndFilterChip[] = [];
+    QUERY_PARAMS.forEach((param) =>
+      searchData.push(
+        ...searchParams
+          .getAll(param)
+          .map((value) =>
+            param === "query"
+              ? { quoteValue: true, value }
+              : { lead: param, value },
+          ),
+      ),
+    );
+    return searchData;
+  };
 
   return (
     <div className="search-wrapper margin-right u-no-margin--bottom">
       <SearchAndFilter
-        existingSearchData={[
-          ...searchParamsToChips("query"),
-          ...searchParamsToChips("status"),
-          ...searchParamsToChips("type"),
-          ...searchParamsToChips("profile"),
-        ]}
+        existingSearchData={searchParamsToChips()}
         filterPanelData={searchAndFilterData}
         returnSearchData={onSearchDataChange}
         onExpandChange={() => {