ref(explore): Migrate context.tsx to nuqs

static/app/views/explore/queryParams/context.tsx

@@ -1,14 +1,11 @@
 import type {ReactNode} from 'react';
 import {useCallback, useEffect, useMemo, useState} from 'react';
-import type {Location} from 'history';
+import {parseAsString, useQueryStates} from 'nuqs';
 
 import {defined} from 'sentry/utils';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {createDefinedContext} from 'sentry/utils/performance/contexts/utils';
 import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
-import {updateNullableLocation} from 'sentry/utils/url/updateNullableLocation';
-import {useLocation} from 'sentry/utils/useLocation';
-import {useNavigate} from 'sentry/utils/useNavigate';
 import {TOP_EVENTS_LIMIT} from 'sentry/views/explore/hooks/useTopEvents';
 import type {
   AggregateField,
@@ -449,18 +446,16 @@ export function useQueryParamsTitle() {
 
 export function useSetQueryParamsSavedQuery() {
   // This by-passes the context entirely because wrapping the modal in the context
-  // is not practical. Instead, we directly use `useLocation` and `useNavigate` to
-  // set the `id` and `title`.
-  const location = useLocation();
-  const navigate = useNavigate();
+  // is not practical. Instead, we directly use nuqs to set the `id` and `title`.
+  const [, setParams] = useQueryStates({
+    [ID_KEY]: parseAsString,
+    [TITLE_KEY]: parseAsString,
+  });
   return useCallback(
     (id: string, title: string) => {
-      const target: Location = {...location, query: {...location.query}};
-      updateNullableLocation(target, ID_KEY, id);
-      updateNullableLocation(target, TITLE_KEY, title);
-      navigate(target);
+      setParams({[ID_KEY]: id, [TITLE_KEY]: title});
     },
-    [location, navigate]
+    [setParams]
   );
 }