Fix navigation inside tabs with a tableview replacing all query param… (#1218)

* fix navigation inside tabs with a tableview replacing all query params in url

* fix copilot suggested issues relating to encoding urls

frontend/src/components/TableView/TableView.tsx

@@ -419,7 +419,11 @@ export const TableView = <T extends MRT_RowData>({
     )
   }
 
-  const buildTableStateUrl = () => `${location.pathname}?${TABLE_STATE_URL_PARAM}=${encodeURIComponent(tableStateId)}`
+  const buildTableStateUrl = () => {
+    const params = new URLSearchParams(location.search)
+    params.set(TABLE_STATE_URL_PARAM, tableStateId)
+    return `${location.pathname}?${params.toString()}`
+  }
 
   const loadStateFromUrl = <TState extends MRT_ColumnFiltersState | MRT_SortingState | MRT_PaginationState>(
     state: TableStateInUrl,

frontend/src/hooks/useSyncTabSearch.ts

@@ -18,15 +18,13 @@ export const useSyncTabSearch = (tab: number) => {
   }, [location.key, location.state])
 
   useEffect(() => {
-    const nextSearch = `?tab=${tab}`
+    const params = new URLSearchParams(location.search)
-    if (location.search === nextSearch) {
+    if (params.get('tab') === String(tab)) return
-      return
-    }
 
     navigate(
       {
         pathname: location.pathname,
-        search: nextSearch,
+        search: `?tab=${tab}`,
       },
       {
         replace: true,