diff --git a/static/app/router/routes.tsx b/static/app/router/routes.tsx
index 1d659bdc62fc44..f387018cb7f208 100644
--- a/static/app/router/routes.tsx
+++ b/static/app/router/routes.tsx
@@ -1087,7 +1087,6 @@ function buildRoutes(): RouteObject[] {
'sentry/views/settings/organizationIntegrations/configureIntegration'
)
),
- deprecatedRouteProps: true,
},
],
},
diff --git a/static/app/utils/useParams.tsx b/static/app/utils/useParams.tsx
index f118e6e0e58f83..d5d90d3a23a916 100644
--- a/static/app/utils/useParams.tsx
+++ b/static/app/utils/useParams.tsx
@@ -29,12 +29,14 @@ type ParamKeys =
| 'groupId'
| 'id'
| 'installationId'
+ | 'integrationId'
| 'integrationSlug'
| 'issueId'
| 'memberId'
| 'notificationSource'
| 'orgId'
| 'projectId'
+ | 'providerKey'
| 'regionName'
| 'release'
| 'relocationUuid'
diff --git a/static/app/views/settings/organizationIntegrations/configureIntegration.spec.tsx b/static/app/views/settings/organizationIntegrations/configureIntegration.spec.tsx
index f43ad05a34deaa..c23b4f108bcfac 100644
--- a/static/app/views/settings/organizationIntegrations/configureIntegration.spec.tsx
+++ b/static/app/views/settings/organizationIntegrations/configureIntegration.spec.tsx
@@ -1,7 +1,6 @@
import {OpsgenieIntegrationFixture} from 'sentry-fixture/opsgenieIntegration';
import {OpsgenieIntegrationProviderFixture} from 'sentry-fixture/opsgenieIntegrationProvider';
import {OrganizationFixture} from 'sentry-fixture/organization';
-import {RouteComponentPropsFixture} from 'sentry-fixture/routeComponentPropsFixture';
import {
render,
@@ -56,13 +55,16 @@ describe('OpsgenieMigrationButton', () => {
method: 'PUT',
});
- render(
- ,
- {organization: org}
- );
+ render(, {
+ organization: org,
+ initialRouterConfig: {
+ location: {
+ pathname: `/settings/${org.slug}/integrations/opsgenie/${integrationId}/`,
+ query: {},
+ },
+ route: '/settings/:orgId/integrations/:providerKey/:integrationId/',
+ },
+ });
renderGlobalModal();
expect(await screen.findByRole('button', {name: 'Migrate Plugin'})).toBeEnabled();
diff --git a/static/app/views/settings/organizationIntegrations/configureIntegration.tsx b/static/app/views/settings/organizationIntegrations/configureIntegration.tsx
index 54d4402660bb0b..87e0d75a50dee9 100644
--- a/static/app/views/settings/organizationIntegrations/configureIntegration.tsx
+++ b/static/app/views/settings/organizationIntegrations/configureIntegration.tsx
@@ -23,18 +23,22 @@ import type {
OrganizationIntegration,
PluginWithProjectList,
} from 'sentry/types/integrations';
-import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
import type {Organization} from 'sentry/types/organization';
import {isActiveSuperuser} from 'sentry/utils/isActiveSuperuser';
import {singleLineRenderer} from 'sentry/utils/marked/marked';
import type {ApiQueryKey} from 'sentry/utils/queryClient';
import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import {decodeScalar} from 'sentry/utils/queryString';
import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
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 useProjects from 'sentry/utils/useProjects';
+import {useRoutes} from 'sentry/utils/useRoutes';
import BreadcrumbTitle from 'sentry/views/settings/components/settingsBreadcrumb/breadcrumbTitle';
import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
@@ -48,11 +52,6 @@ import IntegrationMainSettings from './integrationMainSettings';
import IntegrationRepos from './integrationRepos';
import {IntegrationServerlessFunctions} from './integrationServerlessFunctions';
-type Props = RouteComponentProps<{
- integrationId: string;
- providerKey: string;
-}>;
-
const TABS = [
'repos',
'codeMappings',
@@ -73,12 +72,19 @@ const makePluginQuery = (organization: Organization): ApiQueryKey => {
return [`/organizations/${organization.slug}/plugins/configs/`];
};
-function ConfigureIntegration({params, router, routes, location}: Props) {
+function ConfigureIntegration() {
+ const routes = useRoutes();
+ const location = useLocation();
+ const navigate = useNavigate();
const api = useApi();
const queryClient = useQueryClient();
const organization = useOrganization();
- const tab: Tab = TABS.includes(location.query.tab) ? location.query.tab : 'repos';
- const {integrationId, providerKey} = params;
+ const tabParam = decodeScalar(location.query.tab) as Tab | undefined;
+ const tab: Tab = tabParam && TABS.includes(tabParam) ? tabParam : 'repos';
+ const {integrationId, providerKey} = useParams<{
+ integrationId: string;
+ providerKey: string;
+ }>();
const {
data: config = {providers: []},
isPending: isLoadingConfig,
@@ -133,13 +139,13 @@ function ConfigureIntegration({params, router, routes, location}: Props) {
!organization.access.includes('org:integrations') &&
!isActiveSuperuser()
) {
- router.push(
+ navigate(
normalizeUrl({
pathname: `/settings/${organization.slug}/integrations/${providerKey}/`,
})
);
}
- }, [router, organization, providerKey]);
+ }, [navigate, organization, providerKey]);
if (isLoadingConfig || isLoadingIntegration || isLoadingPlugins) {
return ;
@@ -156,7 +162,7 @@ function ConfigureIntegration({params, router, routes, location}: Props) {
const onTabChange = (value: Tab) => {
// XXX: Omit the cursor to prevent paginating the next tab's queries.
const {cursor: _, ...query} = location.query;
- router.push({
+ navigate({
pathname: location.pathname,
query: {...query, tab: value},
});