From a5130a2d01890c72f31582e5b282e14dccf0d600 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Thu, 20 Nov 2025 16:50:53 -0800 Subject: [PATCH] ref(ui): Remove deprecated route props from SentryApplicationDetails removes use of react router 3 style props --- static/app/router/routes.tsx | 3 - .../sentryApplicationDetails.spec.tsx | 142 +++++++----------- .../sentryApplicationDetails.tsx | 14 +- 3 files changed, 65 insertions(+), 94 deletions(-) diff --git a/static/app/router/routes.tsx b/static/app/router/routes.tsx index 76f3c08ab11e75..87023388eb49ca 100644 --- a/static/app/router/routes.tsx +++ b/static/app/router/routes.tsx @@ -1114,7 +1114,6 @@ function buildRoutes(): RouteObject[] { 'sentry/views/settings/organizationDeveloperSettings/sentryApplicationDetails' ) ), - deprecatedRouteProps: true, }, { path: 'new-internal/', @@ -1125,7 +1124,6 @@ function buildRoutes(): RouteObject[] { 'sentry/views/settings/organizationDeveloperSettings/sentryApplicationDetails' ) ), - deprecatedRouteProps: true, }, { path: ':appSlug/', @@ -1136,7 +1134,6 @@ function buildRoutes(): RouteObject[] { 'sentry/views/settings/organizationDeveloperSettings/sentryApplicationDetails' ) ), - deprecatedRouteProps: true, }, { path: ':appSlug/dashboard/', diff --git a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.spec.tsx b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.spec.tsx index eb0357230cb64b..7f2339aa5f548e 100644 --- a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.spec.tsx +++ b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.spec.tsx @@ -1,6 +1,4 @@ -import {LocationFixture} from 'sentry-fixture/locationFixture'; import {OrganizationFixture} from 'sentry-fixture/organization'; -import {RouterFixture} from 'sentry-fixture/routerFixture'; import {SentryAppFixture} from 'sentry-fixture/sentryApp'; import {SentryAppTokenFixture} from 'sentry-fixture/sentryAppToken'; @@ -10,14 +8,12 @@ import { screen, userEvent, waitFor, + type RouterConfig, } from 'sentry-test/reactTestingLibrary'; import selectEvent from 'sentry-test/selectEvent'; import SentryApplicationDetails from 'sentry/views/settings/organizationDeveloperSettings/sentryApplicationDetails'; -const router = RouterFixture(); -const location = LocationFixture(); - describe('Sentry Application Details', () => { let sentryApp: ReturnType; let token: ReturnType; @@ -31,17 +27,14 @@ describe('Sentry Application Details', () => { }); describe('Creating a new public Sentry App', () => { + const initialRouterConfig: RouterConfig = { + location: { + pathname: '/sentry-apps/new-public/', + }, + route: '/sentry-apps/new-public/', + }; function renderComponent() { - return render( - - ); + return render(, {initialRouterConfig}); } beforeEach(() => { @@ -141,17 +134,14 @@ describe('Sentry Application Details', () => { }); describe('Creating a new internal Sentry App', () => { + const initialRouterConfig: RouterConfig = { + location: { + pathname: '/sentry-apps/new-internal/', + }, + route: '/sentry-apps/new-internal/', + }; function renderComponent() { - return render( - - ); + return render(, {initialRouterConfig}); } it('does not show logo upload fields', () => { @@ -175,17 +165,14 @@ describe('Sentry Application Details', () => { }); describe('Renders public app', () => { + const initialRouterConfig: RouterConfig = { + location: { + pathname: `/sentry-apps/sample-app/`, + }, + route: '/sentry-apps/:appSlug/', + }; function renderComponent() { - return render( - - ); + return render(, {initialRouterConfig}); } beforeEach(() => { @@ -240,17 +227,14 @@ describe('Sentry Application Details', () => { }); describe('Renders for internal apps', () => { + const initialRouterConfig: RouterConfig = { + location: { + pathname: `/sentry-apps/sample-app/`, + }, + route: '/sentry-apps/:appSlug/', + }; function renderComponent() { - return render( - - ); + return render(, {initialRouterConfig}); } beforeEach(() => { @@ -309,17 +293,14 @@ describe('Sentry Application Details', () => { }); describe('Renders masked values', () => { + const initialRouterConfig: RouterConfig = { + location: { + pathname: `/sentry-apps/sample-app/`, + }, + route: '/sentry-apps/:appSlug/', + }; function renderComponent() { - return render( - - ); + return render(, {initialRouterConfig}); } beforeEach(() => { @@ -359,17 +340,14 @@ describe('Sentry Application Details', () => { }); describe('Editing internal app tokens', () => { + const initialRouterConfig: RouterConfig = { + location: { + pathname: `/sentry-apps/sample-app/`, + }, + route: '/sentry-apps/:appSlug/', + }; function renderComponent() { - return render( - - ); + return render(, {initialRouterConfig}); } beforeEach(() => { @@ -449,17 +427,14 @@ describe('Sentry Application Details', () => { }); describe('Editing an existing public Sentry App', () => { + const initialRouterConfig: RouterConfig = { + location: { + pathname: `/sentry-apps/sample-app/`, + }, + route: '/sentry-apps/:appSlug/', + }; function renderComponent() { - return render( - - ); + return render(, {initialRouterConfig}); } beforeEach(() => { @@ -540,17 +515,14 @@ describe('Sentry Application Details', () => { }); describe('Editing an existing public Sentry App with a scope error', () => { + const initialRouterConfig: RouterConfig = { + location: { + pathname: `/sentry-apps/sample-app/`, + }, + route: '/sentry-apps/:appSlug/', + }; function renderComponent() { - render( - - ); + return render(, {initialRouterConfig}); } beforeEach(() => { diff --git a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx index 5dd05194a7be04..5243c83d7697a1 100644 --- a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx +++ b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx @@ -39,7 +39,6 @@ import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Avatar, Scope} from 'sentry/types/core'; import type {SentryApp, SentryAppAvatar} from 'sentry/types/integrations'; -import type {RouteComponentProps} from 'sentry/types/legacyReactRouter'; import type {InternalAppApiToken, NewInternalAppApiToken} from 'sentry/types/user'; import { setApiQueryData, @@ -49,7 +48,10 @@ import { } from 'sentry/utils/queryClient'; import normalizeUrl from 'sentry/utils/url/normalizeUrl'; import useApi from 'sentry/utils/useApi'; +import {useLocation} from 'sentry/utils/useLocation'; +import {useNavigate} from 'sentry/utils/useNavigate'; import useOrganization from 'sentry/utils/useOrganization'; +import {useParams} from 'sentry/utils/useParams'; import ApiTokenRow from 'sentry/views/settings/account/apiTokenRow'; import {displayNewToken} from 'sentry/views/settings/components/newTokenHandler'; import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader'; @@ -150,7 +152,6 @@ class SentryAppFormModel extends FormModel { } } -type Props = RouteComponentProps<{appSlug?: string}>; const makeSentryAppQueryKey = (appSlug?: string): ApiQueryKey => { return [`/sentry-apps/${appSlug}/`]; }; @@ -159,9 +160,10 @@ const makeSentryAppApiTokensQueryKey = (appSlug?: string): ApiQueryKey => { return [`/sentry-apps/${appSlug}/api-tokens/`]; }; -export default function SentryApplicationDetails(props: Props) { - const {appSlug} = props.params; - const {router, location} = props; +export default function SentryApplicationDetails() { + const navigate = useNavigate(); + const location = useLocation(); + const {appSlug} = useParams<{appSlug: string}>(); const organization = useOrganization(); const [form] = useState(() => new SentryAppFormModel()); @@ -230,7 +232,7 @@ export default function SentryApplicationDetails(props: Props) { } else { addSuccessMessage(t('%s successfully created.', data.name)); } - router.push(normalizeUrl(url)); + navigate(normalizeUrl(url)); }; const handleSubmitError = (err: any) => {