From 776efb23468223ac14ff433a1471692a328d9b17 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 12 May 2026 22:37:01 +0000
Subject: [PATCH 1/3] refactor: replace deprecated useRouter with useLocation
 and useNavigate in platformOptionsControl
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the legacy useRouter() hook from react-router 3 shim with the modern
useLocation() and useNavigate() hooks:

- useUrlPlatformOptions: router.location → useLocation()
- PlatformOptionsControl: router.replace() → navigate({...}, {replace: true})

Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
---
 .../onboarding/platformOptionsControl.tsx     | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/static/app/components/onboarding/platformOptionsControl.tsx b/static/app/components/onboarding/platformOptionsControl.tsx
index fd1e004fb084aa..ba03bb22bcd7d3 100644
--- a/static/app/components/onboarding/platformOptionsControl.tsx
+++ b/static/app/components/onboarding/platformOptionsControl.tsx
@@ -8,7 +8,8 @@ import type {
   PlatformOption,
   SelectedPlatformOptions,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
-import {useRouter} from 'sentry/utils/useRouter';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 
 /**
  * Hook that returns the currently selected platform option values from the URL
@@ -17,8 +18,8 @@ import {useRouter} from 'sentry/utils/useRouter';
 export function useUrlPlatformOptions<PlatformOptions extends BasePlatformOptions>(
   platformOptions?: PlatformOptions
 ): SelectedPlatformOptions<PlatformOptions> {
-  const router = useRouter();
-  const {query} = router.location;
+  const location = useLocation();
+  const {query} = location;
 
   return useMemo(() => {
     if (!platformOptions) {
@@ -80,18 +81,22 @@ export function PlatformOptionsControl({
   platformOptions,
   onChange,
 }: PlatformOptionsControlProps) {
-  const router = useRouter();
+  const location = useLocation();
+  const navigate = useNavigate();
   const urlOptionValues = useUrlPlatformOptions(platformOptions);
 
   const handleChange = (key: string, value: string) => {
     onChange?.({[key]: value});
-    router.replace({
-      ...router.location,
-      query: {
-        ...router.location.query,
-        [key]: value,
+    navigate(
+      {
+        ...location,
+        query: {
+          ...location.query,
+          [key]: value,
+        },
       },
-    });
+      {replace: true}
+    );
   };
 
   return (

From b5e0952cc1d1124925f96fbc14afa1fb2dc1b43e Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 12 May 2026 22:49:09 +0000
Subject: [PATCH 2/3] fix: properly narrow query parameter type after useRouter
 removal

With useLocation() instead of useRouter(), query values are properly typed as
QueryParamValue<string> (string | string[] | null | undefined) instead of 'any'.
Add typeof string guard and non-null assertion for proper type safety.

Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
---
 .../app/components/onboarding/platformOptionsControl.tsx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/static/app/components/onboarding/platformOptionsControl.tsx b/static/app/components/onboarding/platformOptionsControl.tsx
index ba03bb22bcd7d3..a29f3866b977b8 100644
--- a/static/app/components/onboarding/platformOptionsControl.tsx
+++ b/static/app/components/onboarding/platformOptionsControl.tsx
@@ -29,9 +29,11 @@ export function useUrlPlatformOptions<PlatformOptions extends BasePlatformOption
     return Object.keys(platformOptions).reduce((acc, key) => {
       const defaultValue = platformOptions[key]!.defaultValue;
       const values = platformOptions[key]!.items.map(({value}) => value);
-      acc[key as keyof PlatformOptions] = values.includes(query[key])
-        ? query[key]
-        : (defaultValue ?? values[0]);
+      const queryValue = query[key];
+      acc[key as keyof PlatformOptions] =
+        typeof queryValue === 'string' && values.includes(queryValue)
+          ? queryValue
+          : (defaultValue ?? values[0]!);
       return acc;
     }, {} as SelectedPlatformOptions<PlatformOptions>);
   }, [platformOptions, query]);

From b7f4a2a0e633d1392c568e0c2299ad25013191d5 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 May 2026 08:45:50 -0700
Subject: [PATCH 3/3] Apply suggestion from @ryan953

---
 static/app/components/onboarding/platformOptionsControl.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/static/app/components/onboarding/platformOptionsControl.tsx b/static/app/components/onboarding/platformOptionsControl.tsx
index a29f3866b977b8..42dce53ea01b9e 100644
--- a/static/app/components/onboarding/platformOptionsControl.tsx
+++ b/static/app/components/onboarding/platformOptionsControl.tsx
@@ -18,8 +18,7 @@ import {useNavigate} from 'sentry/utils/useNavigate';
 export function useUrlPlatformOptions<PlatformOptions extends BasePlatformOptions>(
   platformOptions?: PlatformOptions
 ): SelectedPlatformOptions<PlatformOptions> {
-  const location = useLocation();
-  const {query} = location;
+  const {query} = useLocation();
 
   return useMemo(() => {
     if (!platformOptions) {