ref(settings): Remove usage of deprecatedRouteProps from ApiApplications settings view (#101029)

Migrates usage of `deprecatedRouteProps` for `ApiApplications` -
`sentry/views/settings/account/apiApplications`.


https://www.notion.so/sentry/Frontend-TSC-Project-Remove-all-uses-of-deprecatedRouteProps-true-26a8b10e4b5d8015a6a2dd14f9d41dd7

Author: shashjar

static/app/routes.tsx

@@ -487,7 +487,6 @@ function buildRoutes(): RouteObject[] {
               component: make(
                 () => import('sentry/views/settings/account/apiApplications')
               ),
-              deprecatedRouteProps: true,
             },
             {
               path: ':appId/',

static/app/views/settings/account/apiApplications/index.spec.tsx

@@ -1,6 +1,5 @@
 import {ApiApplicationFixture} from 'sentry-fixture/apiApplication';
 
-import {initializeOrg} from 'sentry-test/initializeOrg';
 import {
   render,
   renderGlobalModal,
@@ -16,8 +15,6 @@ import ApiApplications from 'sentry/views/settings/account/apiApplications';
 jest.mock('sentry/utils/demoMode');
 
 describe('ApiApplications', () => {
-  const {routerProps, router} = initializeOrg({router: {params: {}}});
-
   beforeEach(() => {
     MockApiClient.clearMockResponses();
   });
@@ -28,7 +25,7 @@ describe('ApiApplications', () => {
       body: [],
     });
 
-    render(<ApiApplications {...routerProps} />);
+    render(<ApiApplications />);
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
 
     expect(
@@ -42,7 +39,7 @@ describe('ApiApplications', () => {
       body: [ApiApplicationFixture()],
     });
 
-    render(<ApiApplications {...routerProps} />);
+    render(<ApiApplications />);
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
 
     expect(requestMock).toHaveBeenCalled();
@@ -58,7 +55,7 @@ describe('ApiApplications', () => {
       body: [ApiApplicationFixture()],
     });
 
-    render(<ApiApplications {...routerProps} />);
+    render(<ApiApplications />);
 
     expect(
       await screen.findByText("You haven't created any applications yet.")
@@ -80,7 +77,7 @@ describe('ApiApplications', () => {
       method: 'POST',
     });
 
-    render(<ApiApplications {...routerProps} />);
+    const {router} = render(<ApiApplications />);
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
 
     await userEvent.click(screen.getByLabelText('Create New Application'));
@@ -91,8 +88,11 @@ describe('ApiApplications', () => {
     );
 
     await waitFor(() => {
-      expect(router.push).toHaveBeenLastCalledWith(
-        '/settings/account/api/applications/234/'
+      expect(router.location).toEqual(
+        expect.objectContaining({
+          pathname: '/settings/account/api/applications/234/',
+          query: {},
+        })
       );
     });
   });
@@ -108,7 +108,7 @@ describe('ApiApplications', () => {
       method: 'DELETE',
     });
 
-    render(<ApiApplications {...routerProps} />);
+    render(<ApiApplications />);
     renderGlobalModal();
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
 

static/app/views/settings/account/apiApplications/index.tsx

@@ -13,21 +13,20 @@ import PanelHeader from 'sentry/components/panels/panelHeader';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconAdd} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import type {ApiApplication} from 'sentry/types/user';
 import {isDemoModeActive} from 'sentry/utils/demoMode';
 import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import Row from 'sentry/views/settings/account/apiApplications/row';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 
 const ROUTE_PREFIX = '/settings/account/api/';
 
-type Props = RouteComponentProps;
-
-function ApiApplications({router}: Props) {
+export default function ApiApplications() {
   const api = useApi();
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
   const ENDPOINT = '/api-applications/';
 
@@ -58,7 +57,7 @@ function ApiApplications({router}: Props) {
       });
 
       addSuccessMessage(t('Created a new API Application'));
-      router.push(`${ROUTE_PREFIX}applications/${app.id}/`);
+      navigate(`${ROUTE_PREFIX}applications/${app.id}/`);
     } catch {
       addErrorMessage(t('Unable to remove application. Please try again.'));
     }
@@ -104,5 +103,3 @@ function ApiApplications({router}: Props) {
     </SentryDocumentTitle>
   );
 }
-
-export default ApiApplications;