Merge pull request #15807 from leonnicolas/hide-empty-rules-persitence

Make "hide empty rules" persistent

web/ui/mantine-ui/src/pages/AlertsPage.tsx

@@ -23,10 +23,10 @@ import { Fragment, useEffect, useMemo } from "react";
 import { StateMultiSelect } from "../components/StateMultiSelect";
 import { IconInfoCircle, IconSearch } from "@tabler/icons-react";
 import { LabelBadges } from "../components/LabelBadges";
+import { useLocalStorage } from "@mantine/hooks";
 import { useSettings } from "../state/settingsSlice";
 import {
   ArrayParam,
-  BooleanParam,
   NumberParam,
   StringParam,
   useQueryParam,
@@ -162,10 +162,10 @@ export default function AlertsPage() {
     withDefault(StringParam, "")
   );
   const [debouncedSearch] = useDebouncedValue<string>(searchFilter.trim(), 250);
-  const [showEmptyGroups, setShowEmptyGroups] = useQueryParam(
-    "showEmptyGroups",
-    withDefault(BooleanParam, true)
-  );
+  const [showEmptyGroups, setShowEmptyGroups] = useLocalStorage<boolean>({
+    key: "alertsPage.showEmptyGroups",
+    defaultValue: true,
+  });
 
   const { alertGroupsPerPage } = useSettings();
   const [activePage, setActivePage] = useQueryParam(

web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx

@@ -25,6 +25,7 @@ import {
   humanizeDuration,
   now,
 } from "../../lib/formatTime";
+import { useLocalStorage } from "@mantine/hooks";
 import { useAppDispatch, useAppSelector } from "../../state/hooks";
 import {
   setCollapsedPools,
@@ -38,7 +39,6 @@ import panelClasses from "../../Panel.module.css";
 import TargetLabels from "./TargetLabels";
 import { useDebouncedValue } from "@mantine/hooks";
 import { targetPoolDisplayLimit } from "./TargetsPage";
-import { BooleanParam, useQueryParam, withDefault } from "use-query-params";
 import { badgeIconStyle } from "../../styles";
 
 type ScrapePool = {
@@ -165,10 +165,10 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
   });
 
   const dispatch = useAppDispatch();
-  const [showEmptyPools, setShowEmptyPools] = useQueryParam(
-    "showEmptyPools",
-    withDefault(BooleanParam, true)
-  );
+  const [showEmptyPools, setShowEmptyPools] = useLocalStorage<boolean>({
+    key: "targetsPage.showEmptyPools",
+    defaultValue: true,
+  });
 
   const { collapsedPools, showLimitAlert } = useAppSelector(
     (state) => state.targetsPage