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}, });