refactor/prefixed search params

src/api/query-hooks/useAllConfigsQuery.ts

@@ -1,17 +1,23 @@
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { useSearchParams } from "react-router-dom";
+import { usePrefixedSearchParams } from "@flanksource-ui/hooks/usePrefixedSearchParams";
 import { defaultStaleTime, prepareConfigListQuery } from ".";
 import { getAllConfigsMatchingQuery } from "../services/configs";
 import { useShowDeletedConfigs } from "@flanksource-ui/store/preference.state";
 
 export const useAllConfigsQuery = ({
   enabled = true,
   staleTime = defaultStaleTime,
+  paramPrefix,
   ...rest
-}) => {
-  const [searchParams] = useSearchParams({
+}: {
+  enabled?: boolean;
+  staleTime?: number;
+  paramPrefix?: string;
+  [key: string]: any;
+} = {}) => {
+  const [searchParams] = usePrefixedSearchParams(paramPrefix, false, {
     sortBy: "type",
     sortOrder: "asc",
     groupBy: "type"
@@ -25,7 +31,9 @@ export const useAllConfigsQuery = ({
   const labels = searchParams.get("labels") ?? undefined;
   const status = searchParams.get("status") ?? undefined;
   const health = searchParams.get("health") ?? undefined;
-  const { pageIndex, pageSize } = useReactTablePaginationState();
+  const { pageIndex, pageSize } = useReactTablePaginationState({
+    paramPrefix
+  });
 
   const query = useMemo(
     () =>

src/api/query-hooks/useConfigChangesHooks.ts

@@ -6,15 +6,16 @@ import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactT
 import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { usePrefixedSearchParams } from "@flanksource-ui/hooks/usePrefixedSearchParams";
 import {
   CatalogChangesSearchResponse,
   GetConfigsRelatedChangesParams,
   getConfigsChanges
 } from "../services/configs";
 
-function useConfigChangesTagsFilter() {
-  const [params] = useSearchParams();
+function useConfigChangesTagsFilter(paramPrefix?: string) {
+  const [params] = usePrefixedSearchParams(paramPrefix, false);
 
   const tags = useMemo(() => {
     const allTags = params.get("tags");
@@ -36,14 +37,22 @@ function useConfigChangesTagsFilter() {
 }
 
 export function useGetAllConfigsChangesQuery(
-  queryOptions: UseQueryOptions<CatalogChangesSearchResponse> = {
+  {
+    paramPrefix,
+    ...queryOptions
+  }: UseQueryOptions<CatalogChangesSearchResponse> & {
+    paramPrefix?: string;
+  } = {
     enabled: true,
     keepPreviousData: true
   }
 ) {
   const showChangesFromDeletedConfigs = useShowDeletedConfigs();
-  const { timeRangeValue } = useTimeRangeParams(configChangesDefaultDateFilter);
-  const [params] = useSearchParams({
+  const { timeRangeValue } = useTimeRangeParams(
+    configChangesDefaultDateFilter,
+    paramPrefix
+  );
+  const [params] = usePrefixedSearchParams(paramPrefix, false, {
     sortBy: "created_at",
     sortDirection: "desc"
   });
@@ -52,11 +61,13 @@ export function useGetAllConfigsChangesQuery(
   const configType = params.get("configType") ?? undefined;
   const from = timeRangeValue?.from ?? undefined;
   const to = timeRangeValue?.to ?? undefined;
-  const [sortBy] = useReactTableSortState();
+  const [sortBy] = useReactTableSortState({ paramPrefix });
   const configTypes = params.get("configTypes") ?? "all";
-  const { pageSize, pageIndex } = useReactTablePaginationState();
-  const tags = useConfigChangesTagsFilter();
-  const arbitraryFilter = useConfigChangesArbitraryFilters();
+  const { pageSize, pageIndex } = useReactTablePaginationState({
+    paramPrefix
+  });
+  const tags = useConfigChangesTagsFilter(paramPrefix);
+  const arbitraryFilter = useConfigChangesArbitraryFilters(paramPrefix);
 
   const props = {
     include_deleted_configs: showChangesFromDeletedConfigs,
@@ -90,7 +101,7 @@ export function useGetConfigChangesByIDQuery(
   const { id } = useParams();
   const showChangesFromDeletedConfigs = useShowDeletedConfigs();
   const { timeRangeValue } = useTimeRangeParams(configChangesDefaultDateFilter);
-  const [params] = useSearchParams({
+  const [params] = usePrefixedSearchParams(undefined, false, {
     downstream: "true",
     upstream: "false",
     sortBy: "created_at",

src/components/Configs/Changes/ConfigChangeTable.tsx

@@ -7,7 +7,7 @@ import { ChangeIcon } from "@flanksource-ui/ui/Icons/ChangeIcon";
 import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
 import { CellContext } from "@tanstack/react-table";
 import { MRT_ColumnDef } from "mantine-react-table";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import ConfigLink from "../ConfigLink/ConfigLink";
 import MRTConfigListTagsCell from "../ConfigList/Cells/MRTConfigListTagsCell";
 import { ConfigDetailChangeModal } from "./ConfigDetailsChanges/ConfigDetailsChanges";
@@ -36,7 +36,9 @@ export function ConfigChangeDateCell({
   );
 }
 
-const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
+const configChangesColumn = (
+  paramPrefix?: string
+): MRT_ColumnDef<ConfigChange>[] => [
   {
     header: "Last Seen",
     id: "created_at",
@@ -76,6 +78,7 @@ const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
           filterValue={configId}
           paramKey="id"
           paramsToReset={paramsToReset.configChanges}
+          paramPrefix={paramPrefix}
         >
           <ConfigLink
             config={row.original.config}
@@ -97,6 +100,7 @@ const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
           filterValue={changeType}
           paramKey="changeType"
           paramsToReset={paramsToReset.configChanges}
+          paramPrefix={paramPrefix}
         >
           <div className="space-x-1 overflow-hidden text-ellipsis">
             <ChangeIcon change={row.original} />
@@ -124,6 +128,7 @@ const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
           filterValue={summary}
           paramKey="summary"
           paramsToReset={paramsToReset.configChanges}
+          paramPrefix={paramPrefix}
         >
           {summary}
         </FilterByCellValue>
@@ -133,7 +138,13 @@ const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
   {
     header: "Tags",
     accessorKey: "tags",
-    Cell: (props) => <MRTConfigListTagsCell {...props} enableFilterByTag />,
+    Cell: (props) => (
+      <MRTConfigListTagsCell
+        {...props}
+        enableFilterByTag
+        paramPrefix={paramPrefix}
+      />
+    ),
     size: 100
   },
   {
@@ -148,6 +159,7 @@ const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
             filterValue={userID}
             paramKey="created_by"
             paramsToReset={paramsToReset.configChanges}
+            paramPrefix={paramPrefix}
           >
             <GetUserAvatar userID={userID} />
           </FilterByCellValue>
@@ -161,6 +173,7 @@ const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
             filterValue={externalCreatedBy}
             paramKey="external_created_by"
             paramsToReset={paramsToReset.configChanges}
+            paramPrefix={paramPrefix}
           >
             <span>{externalCreatedBy}</span>
           </FilterByCellValue>
@@ -174,6 +187,7 @@ const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
             filterValue={source}
             paramKey="source"
             paramsToReset={paramsToReset.configChanges}
+            paramPrefix={paramPrefix}
           >
             <span>{source}</span>
           </FilterByCellValue>
@@ -190,17 +204,23 @@ type ConfigChangeTableProps = {
   isLoading?: boolean;
   totalRecords: number;
   numberOfPages: number;
+  paramPrefix?: string;
 };
 
 export function ConfigChangeTable({
   data,
   isLoading,
   totalRecords,
-  numberOfPages
+  numberOfPages,
+  paramPrefix
 }: ConfigChangeTableProps) {
   const [selectedConfigChange, setSelectedConfigChange] =
     useState<ConfigChange>();
   const [modalIsOpen, setModalIsOpen] = useState(false);
+  const columns = useMemo(
+    () => configChangesColumn(paramPrefix),
+    [paramPrefix]
+  );
 
   const { data: configChange, isLoading: changeLoading } =
     useGetConfigChangesById(
@@ -214,7 +234,7 @@ export function ConfigChangeTable({
   return (
     <>
       <MRTDataTable
-        columns={configChangesColumn}
+        columns={columns}
         data={data}
         isLoading={isLoading}
         enableServerSideSorting
@@ -226,6 +246,7 @@ export function ConfigChangeTable({
           setSelectedConfigChange(row);
           setModalIsOpen(true);
         }}
+        urlParamPrefix={paramPrefix}
       />
       {configChange && (
         <ConfigDetailChangeModal

src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx

@@ -4,6 +4,7 @@ import { URLSearchParamsInit } from "react-router-dom";
 
 type Props = {
   paramsToReset?: string[];
+  paramPrefix?: string;
 };
 
 export const configChangesDefaultDateFilter: URLSearchParamsInit = {
@@ -13,10 +14,12 @@ export const configChangesDefaultDateFilter: URLSearchParamsInit = {
 };
 
 export default function ConfigChangesDateRangeFilter({
-  paramsToReset = []
+  paramsToReset = [],
+  paramPrefix
 }: Props) {
   const { setTimeRangeParams, getTimeRangeFromUrl } = useTimeRangeParams(
-    configChangesDefaultDateFilter
+    configChangesDefaultDateFilter,
+    paramPrefix
   );
 
   const timeRangeValue = getTimeRangeFromUrl();

src/components/Configs/ConfigList/Cells/ConfigListTagsCell.tsx

@@ -1,7 +1,7 @@
+import { usePrefixedSearchParams } from "@flanksource-ui/hooks/usePrefixedSearchParams";
 import { Tag } from "@flanksource-ui/ui/Tags/Tag";
 import { CellContext } from "@tanstack/react-table";
 import { useCallback } from "react";
-import { useSearchParams } from "react-router-dom";
 import { ConfigItem } from "../../../../api/types/configs";
 
 type ConfigListTagsCellProps<
@@ -13,18 +13,23 @@ type ConfigListTagsCellProps<
   label?: string;
   enableFilterByTag?: boolean;
   filterByTagParamKey?: string;
+  /**
+   * Optional prefix to namespace the search params.
+   */
+  paramPrefix?: string;
 };
 
 export default function ConfigListTagsCell<
-  T extends { tags?: Record<string, any>; id: string } 
+  T extends { tags?: Record<string, any>; id: string }
 >({
   row,
   getValue,
   hideGroupByView = false,
   enableFilterByTag = false,
-  filterByTagParamKey = "tags"
+  filterByTagParamKey = "tags",
+  paramPrefix
 }: ConfigListTagsCellProps<T>): JSX.Element | null {
-  const [params, setParams] = useSearchParams();
+  const [params, setParams] = usePrefixedSearchParams(paramPrefix, false);
 
   const tagMap = getValue<ConfigItem["tags"]>() || {};
   const tagKeys = Object.keys(tagMap)
@@ -47,31 +52,35 @@ export default function ConfigListTagsCell<
       e.preventDefault();
       e.stopPropagation();
 
-      // Get the current tags from the URL
-      const currentTags = params.get("tags");
-      const currentTagsArray = (
-        currentTags ? currentTags.split(",") : []
-      ).filter((value) => {
-        const tagKey = value.split("____")[0];
-        const tagAction = value.split(":")[1] === "1" ? "include" : "exclude";
+      setParams((currentParams) => {
+        const nextParams = new URLSearchParams(currentParams);
 
-        if (tagKey === tag.key && tagAction !== action) {
-          return false;
-        }
-        return true;
-      });
+        // Get the current tags from the URL
+        const currentTags = nextParams.get(filterByTagParamKey);
+        const currentTagsArray = (
+          currentTags ? currentTags.split(",") : []
+        ).filter((value) => {
+          const tagKey = value.split("____")[0];
+          const tagAction = value.split(":")[1] === "1" ? "include" : "exclude";
+
+          if (tagKey === tag.key && tagAction !== action) {
+            return false;
+          }
+          return true;
+        });
 
-      // Append the new value, but for same tags, don't allow including and excluding at the same time
-      const updatedValue = currentTagsArray
-        .concat(`${tag.key}____${tag.value}:${action === "include" ? 1 : -1}`)
-        .filter((value, index, self) => self.indexOf(value) === index)
-        .join(",");
+        // Append the new value, but for same tags, don't allow including and excluding at the same time
+        const updatedValue = currentTagsArray
+          .concat(`${tag.key}____${tag.value}:${action === "include" ? 1 : -1}`)
+          .filter((value, index, self) => self.indexOf(value) === index)
+          .join(",");
 
-      // Update the URL
-      params.set(filterByTagParamKey, updatedValue);
-      setParams(params);
+        // Update the URL
+        nextParams.set(filterByTagParamKey, updatedValue);
+        return nextParams;
+      });
     },
-    [enableFilterByTag, filterByTagParamKey, params, setParams]
+    [enableFilterByTag, filterByTagParamKey, setParams]
   );
 
   const groupByProp = decodeURIComponent(params.get("groupByProp") ?? "");

src/components/Configs/ConfigList/Cells/MRTConfigListTagsCell.tsx

@@ -1,6 +1,6 @@
+import { usePrefixedSearchParams } from "@flanksource-ui/hooks/usePrefixedSearchParams";
 import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import TagsFilterCell from "@flanksource-ui/ui/Tags/TagsFilterCell";
-import { useSearchParams } from "react-router-dom";
 import { ConfigItem } from "../../../../api/types/configs";
 
 type MRTConfigListTagsCellProps<
@@ -12,6 +12,10 @@ type MRTConfigListTagsCellProps<
   hideGroupByView?: boolean;
   enableFilterByTag?: boolean;
   filterByTagParamKey?: string;
+  /**
+   * Optional prefix to namespace the search params.
+   */
+  paramPrefix?: string;
 };
 
 export default function MRTConfigListTagsCell<
@@ -20,9 +24,10 @@ export default function MRTConfigListTagsCell<
   cell,
   hideGroupByView = false,
   enableFilterByTag = false,
-  filterByTagParamKey = "tags"
+  filterByTagParamKey = "tags",
+  paramPrefix
 }: MRTConfigListTagsCellProps<T>): JSX.Element | null {
-  const [params] = useSearchParams();
+  const [params] = usePrefixedSearchParams(paramPrefix, false);
 
   const tagMap = cell.getValue<ConfigItem["tags"]>() || {};
   const tagKeys = Object.keys(tagMap)
@@ -71,6 +76,10 @@ export default function MRTConfigListTagsCell<
   }
 
   return (
-    <TagsFilterCell tags={tagMap} filterByTagParamKey={filterByTagParamKey} />
+    <TagsFilterCell
+      tags={tagMap}
+      filterByTagParamKey={filterByTagParamKey}
+      paramPrefix={paramPrefix}
+    />
   );
 }