Fix measure breadcrumb category filter

When clicking a category name in the measure detail breadcrumb, users should be taken back to the measures list with that category filtered. Previously, the breadcrumb linked to a route that wasn't read by the measures page.

Changed the breadcrumb to use a ?category search param instead of a route segment, and updated the measures page to initialize and sync its category filter from the URL. Removed the now-unused category/:categoryId route.

Signed-off-by: Bryan Frimin <bryan@getprobo.com>

apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx

@@ -1,7 +1,6 @@
 import {
   getMeasureStateLabel,
   measureStates,
-  slugify,
   sprintf,
 } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
@@ -148,7 +147,7 @@ export default function MeasureDetailPage(props: Props) {
             ? [
                 {
                   label: measure.category,
-                  to: `/organizations/${organizationId}/measures/category/${slugify(measure.category)}`,
+                  to: `/organizations/${organizationId}/measures?category=${encodeURIComponent(measure.category)}`,
                 },
               ]
             : []),

apps/console/src/pages/organizations/measures/MeasuresPage.tsx

@@ -32,7 +32,8 @@ import {
   useToast,
 } from "@probo/ui";
 import { MeasureBadge } from "@probo/ui/src/Molecules/Badge/MeasureBadge";
-import { type ChangeEventHandler, useRef, useState, useTransition } from "react";
+import { type ChangeEventHandler, useEffect, useRef, useState, useTransition } from "react";
+import { useSearchParams } from "react-router";
 import {
   ConnectionHandler,
   graphql,
@@ -164,10 +165,13 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) {
     throw new Error("invalid node type");
   }
 
+  const [searchParams, setSearchParams] = useSearchParams();
+  const initialCategory = searchParams.get("category");
+
   const [isPending, startTransition] = useTransition();
   const [queryFilter, setQueryFilter] = useState<string | null>(null);
   const [stateFilter, setStateFilter] = useState<MeasureState | null>(null);
-  const [categoryFilter, setCategoryFilter] = useState<string | null>(null);
+  const [categoryFilter, setCategoryFilter] = useState<string | null>(initialCategory);
 
   const { data, loadNext, hasNext, isLoadingNext, refetch }
     = usePaginationFragment<MeasuresPageRefetchQuery, MeasuresPageFragment$key>(
@@ -189,6 +193,13 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) {
     });
   };
 
+  useEffect(() => {
+    if (initialCategory) {
+      refetchFilters({ category: initialCategory });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleQueryFilterChange = (value: string) => {
     const newQuery = value === "" ? null : value;
     setQueryFilter(newQuery);
@@ -204,6 +215,15 @@ export default function MeasuresPage({ queryRef }: MeasuresPageProps) {
   const handleCategoryFilterChange = (value: string) => {
     const newCategory = value === "ALL" ? null : value;
     setCategoryFilter(newCategory);
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev);
+      if (newCategory) {
+        next.set("category", newCategory);
+      } else {
+        next.delete("category");
+      }
+      return next;
+    }, { replace: true });
     refetchFilters({ category: newCategory });
   };
 

apps/console/src/routes/measureRoutes.ts

@@ -22,12 +22,6 @@ export const measureRoutes = [
       () =>
         import("#/pages/organizations/measures/MeasuresPageLoader"),
     ),
-    children: [
-      {
-        path: "category/:categoryId",
-        Component: Fragment,
-      },
-    ],
   },
   {
     path: "measures/:measureId",