ref(releases): Migrate release actions off deprecated route props (#103705)

switches a few props out for hooks

Author: scttcper

static/app/views/releases/detail/header/releaseActions.spec.tsx

@@ -1,12 +1,8 @@
-import type {Location} from 'history';
 import {HealthFixture} from 'sentry-fixture/health';
-import {LocationFixture} from 'sentry-fixture/locationFixture';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ReleaseFixture} from 'sentry-fixture/release';
 import {ReleaseMetaFixture} from 'sentry-fixture/releaseMeta';
 import {ReleaseProjectFixture} from 'sentry-fixture/releaseProject';
-import {RouteComponentPropsFixture} from 'sentry-fixture/routeComponentPropsFixture';
-import {RouterFixture} from 'sentry-fixture/routerFixture';
 
 import {
   render,
@@ -15,13 +11,13 @@ import {
   userEvent,
   waitFor,
 } from 'sentry-test/reactTestingLibrary';
+import type {RouterConfig} from 'sentry-test/reactTestingLibrary';
 
 import type {ReleaseProject} from 'sentry/types/release';
 import {ReleaseStatus} from 'sentry/types/release';
 import ReleaseActions from 'sentry/views/releases/detail/header/releaseActions';
 
 describe('ReleaseActions', () => {
-  const router = RouterFixture();
   const organization = OrganizationFixture();
 
   const project1 = ReleaseProjectFixture({
@@ -40,15 +36,17 @@ describe('ReleaseActions', () => {
     projects: [project1, project2],
   });
 
-  const location: Location = {
-    ...LocationFixture(),
-    pathname: `/organizations/${organization.slug}/releases/${release.version}/`,
-    query: {
-      project: '1',
-      statsPeriod: '24h',
-      yAxis: 'events',
+  const initialRouterConfig: RouterConfig = {
+    location: {
+      pathname: `/organizations/${organization.slug}/releases/${release.version}/`,
+      query: {
+        project: '1',
+        statsPeriod: '24h',
+        yAxis: 'events',
+      },
     },
   };
+
   let mockUpdate: ReturnType<typeof MockApiClient.addMockResponse>;
 
   beforeEach(() => {
@@ -63,21 +61,19 @@ describe('ReleaseActions', () => {
   });
 
   it('archives a release', async () => {
-    render(
+    const {router} = render(
       <ReleaseActions
-        organization={organization}
         projectSlug={release.projects[0]!.slug}
         release={release}
         refetchData={jest.fn()}
         releaseMeta={{...ReleaseMetaFixture(), projects: release.projects}}
-        location={location}
       />,
       {
-        router,
-        deprecatedRouterMocks: true,
+        organization,
+        initialRouterConfig,
       }
     );
-    renderGlobalModal({router, deprecatedRouterMocks: true});
+    renderGlobalModal();
 
     await userEvent.click(screen.getByLabelText('Actions'));
 
@@ -106,8 +102,10 @@ describe('ReleaseActions', () => {
       })
     );
     await waitFor(() =>
-      expect(router.push).toHaveBeenCalledWith(
-        `/organizations/${organization.slug}/explore/releases/`
+      expect(router.location).toEqual(
+        expect.objectContaining({
+          pathname: `/organizations/${organization.slug}/explore/releases/`,
+        })
       )
     );
   });
@@ -117,20 +115,17 @@ describe('ReleaseActions', () => {
 
     render(
       <ReleaseActions
-        {...RouteComponentPropsFixture()}
-        organization={organization}
         projectSlug={release.projects[0]!.slug}
         release={{...release, status: ReleaseStatus.ARCHIVED}}
         refetchData={refetchDataMock}
         releaseMeta={{...ReleaseMetaFixture(), projects: release.projects}}
-        location={location}
       />,
       {
-        router,
-        deprecatedRouterMocks: true,
+        organization,
+        initialRouterConfig,
       }
     );
-    renderGlobalModal({router});
+    renderGlobalModal();
 
     await userEvent.click(screen.getByLabelText('Actions'));
 
@@ -162,19 +157,17 @@ describe('ReleaseActions', () => {
     await waitFor(() => expect(refetchDataMock).toHaveBeenCalledTimes(1));
   });
 
-  it('navigates to a next/prev release', () => {
-    const {rerender} = render(
+  it('navigates to a next/prev release', async () => {
+    const {router} = render(
       <ReleaseActions
-        organization={organization}
         projectSlug={release.projects[0]!.slug}
         release={release}
         refetchData={jest.fn()}
         releaseMeta={{...ReleaseMetaFixture(), projects: release.projects}}
-        location={location}
       />,
       {
-        router,
-        deprecatedRouterMocks: true,
+        organization,
+        initialRouterConfig,
       }
     );
 
@@ -195,19 +188,13 @@ describe('ReleaseActions', () => {
       `/organizations/${organization.slug}/releases/999/?project=1&statsPeriod=24h&yAxis=events`
     );
 
-    rerender(
-      <ReleaseActions
-        organization={organization}
-        projectSlug={release.projects[0]!.slug}
-        release={release}
-        refetchData={jest.fn()}
-        releaseMeta={{...ReleaseMetaFixture(), projects: release.projects}}
-        location={{
-          ...location,
-          pathname: `/organizations/${organization.slug}/releases/${release.version}/files-changed/`,
-        }}
-      />
-    );
+    // Simulate navigation to a sub-page
+    await waitFor(() => {
+      router.navigate({
+        pathname: `/organizations/${organization.slug}/releases/${release.version}/files-changed/`,
+        search: 'project=1&statsPeriod=24h&yAxis=events',
+      });
+    });
 
     expect(screen.getByLabelText('Newer')).toHaveAttribute(
       'href',

static/app/views/releases/detail/header/releaseActions.tsx

@@ -1,6 +1,5 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
-import type {Location} from 'history';
 
 import {archiveRelease, restoreRelease} from 'sentry/actionCreators/release';
 import {Client} from 'sentry/api';
@@ -14,39 +13,35 @@ import TextOverflow from 'sentry/components/textOverflow';
 import {IconEllipsis, IconNext, IconPrevious} from 'sentry/icons';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Organization} from 'sentry/types/organization';
 import type {Release, ReleaseMeta} from 'sentry/types/release';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {browserHistory} from 'sentry/utils/browserHistory';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
+import useOrganization from 'sentry/utils/useOrganization';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {isReleaseArchived} from 'sentry/views/releases/utils';
 import {makeReleasesPathname} from 'sentry/views/releases/utils/pathnames';
 
 type Props = {
-  location: Location;
-  organization: Organization;
   projectSlug: string;
   refetchData: () => void;
   release: Release;
   releaseMeta: ReleaseMeta;
 };
 
-function ReleaseActions({
-  location,
-  organization,
-  projectSlug,
-  release,
-  releaseMeta,
-  refetchData,
-}: Props) {
+function ReleaseActions({projectSlug, release, releaseMeta, refetchData}: Props) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const organization = useOrganization();
+
   async function handleArchive() {
     try {
       await archiveRelease(new Client(), {
         orgSlug: organization.slug,
         projectSlug,
         releaseVersion: release.version,
       });
-      browserHistory.push(
+      navigate(
         makeReleasesPathname({
           organization,
           path: '/',

static/app/views/releases/detail/header/releaseHeader.tsx

@@ -174,12 +174,10 @@ function ReleaseHeader({
 
       <Layout.HeaderActions>
         <ReleaseActions
-          organization={organization}
           projectSlug={project.slug}
           release={release}
           releaseMeta={releaseMeta}
           refetchData={refetchData}
-          location={location}
         />
       </Layout.HeaderActions>