feat(settings): Migrate configure integration from deprecatedRouteProps (#103128)

Author: scttcper

static/app/router/routes.tsx

@@ -1088,7 +1088,6 @@ function buildRoutes(): RouteObject[] {
                 'sentry/views/settings/organizationIntegrations/configureIntegration'
               )
           ),
-          deprecatedRouteProps: true,
         },
       ],
     },

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'

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(
-      <ConfigureIntegration
-        {...RouteComponentPropsFixture()}
-        params={{integrationId, providerKey: 'opsgenie'}}
-      />,
-      {organization: org}
-    );
+    render(<ConfigureIntegration />, {
+      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();
 

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