feat(issues): Add front end for resolve in upcoming release (#72619)

this pr makes the front end changes to support resolve in upcoming
release. backend changes in
#70990. the changes made include
adding an option to the Resolve button on issue details (hidden behind a
feature flag), adding a subtitle to the resolve dropdown to clarify
behavior, and updating the resolution box to support this form of
resolution. the group activities item shouldn't need any updates as it
mirrors the behavior as "resolve in next release"

Author: roggenkemper

static/app/components/actions/resolve.spec.tsx

@@ -1,3 +1,4 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ReleaseFixture} from 'sentry-fixture/release';
 
 import {
@@ -228,4 +229,39 @@ describe('ResolveActions', function () {
     );
     expect(screen.queryByLabelText('More resolve options')).not.toBeInTheDocument();
   });
+
+  it('does render next release option with subtitle', async function () {
+    const onUpdate = jest.fn();
+    MockApiClient.addMockResponse({
+      url: '/projects/org-slug/project-slug/releases/',
+      body: [ReleaseFixture()],
+    });
+    render(<ResolveActions hasRelease projectSlug="project-slug" onUpdate={onUpdate} />);
+
+    await userEvent.click(screen.getByLabelText('More resolve options'));
+    expect(await screen.findByText('The next release')).toBeInTheDocument();
+    expect(
+      await screen.findByText('The next release after the current one')
+    ).toBeInTheDocument();
+  });
+
+  it('does render in upcoming release', async function () {
+    const organization = OrganizationFixture({
+      features: ['resolve-in-upcoming-release'],
+    });
+    const onUpdate = jest.fn();
+    MockApiClient.addMockResponse({
+      url: '/projects/org-slug/project-slug/releases/',
+      body: [ReleaseFixture()],
+    });
+    render(<ResolveActions hasRelease projectSlug="project-slug" onUpdate={onUpdate} />, {
+      organization,
+    });
+
+    await userEvent.click(screen.getByLabelText('More resolve options'));
+    expect(await screen.findByText('The upcoming release')).toBeInTheDocument();
+    expect(
+      await screen.findByText('The next release that is not yet released')
+    ).toBeInTheDocument();
+  });
 });

static/app/components/actions/resolve.tsx

@@ -124,6 +124,23 @@ function ResolveActions({
     });
   }
 
+  function handleUpcomingReleaseResolution() {
+    if (hasRelease) {
+      onUpdate({
+        status: GroupStatus.RESOLVED,
+        statusDetails: {
+          inUpcomingRelease: true,
+        },
+        substatus: null,
+      });
+    }
+
+    trackAnalytics('resolve_issue', {
+      organization,
+      release: 'upcoming',
+    });
+  }
+
   function handleNextReleaseResolution() {
     if (hasRelease) {
       onUpdate({
@@ -188,12 +205,25 @@ function ResolveActions({
       });
     };
 
+    const hasUpcomingRelease = organization.features.includes(
+      'resolve-in-upcoming-release'
+    );
+
     const isSemver = latestRelease ? isSemverRelease(latestRelease.version) : false;
     const items: MenuItemProps[] = [
+      {
+        key: 'upcoming-release',
+        label: t('The upcoming release'),
+        details: actionTitle
+          ? actionTitle
+          : t('The next release that is not yet released'),
+        onAction: () => onActionOrConfirm(handleUpcomingReleaseResolution),
+        hidden: !hasUpcomingRelease,
+      },
       {
         key: 'next-release',
         label: t('The next release'),
-        details: actionTitle,
+        details: actionTitle ? actionTitle : t('The next release after the current one'),
         onAction: () => onActionOrConfirm(handleNextReleaseResolution),
       },
       {
@@ -238,9 +268,15 @@ function ResolveActions({
         )}
         disabledKeys={
           multipleProjectsSelected
-            ? ['next-release', 'current-release', 'another-release', 'a-commit']
+            ? [
+                'next-release',
+                'current-release',
+                'another-release',
+                'a-commit',
+                'upcoming-release',
+              ]
             : disabled || !hasRelease
-              ? ['next-release', 'current-release', 'another-release']
+              ? ['next-release', 'current-release', 'another-release', 'upcoming-release']
               : []
         }
         menuTitle={shouldDisplayCta ? <SetupReleasesPrompt /> : t('Resolved In')}

static/app/components/resolutionBox.spec.tsx

@@ -112,4 +112,25 @@ describe('ResolutionBox', function () {
       'This issue has been marked as resolved by f7f395din'
     );
   });
+
+  it('handles inUpcomingRelease', function () {
+    const {container} = render(
+      <ResolutionBox
+        statusDetails={{
+          inUpcomingRelease: true,
+          actor: {
+            id: '111',
+            name: 'David Cramer',
+            username: 'dcramer',
+            ip_address: '127.0.0.1',
+            email: '[email protected]',
+          },
+        }}
+        projectId="1"
+      />
+    );
+    expect(container).toHaveTextContent(
+      'David Cramer marked this issue as resolved in the upcoming release.'
+    );
+  });
 });

static/app/components/resolutionBox.tsx

@@ -74,6 +74,15 @@ function renderReason(
         })
       : t('This issue has been marked as resolved in the upcoming release.');
   }
+
+  if (statusDetails.inUpcomingRelease) {
+    return actor
+      ? tct('[actor] marked this issue as resolved in the upcoming release.', {
+          actor,
+        })
+      : t('This issue has been marked as resolved in the upcoming release.');
+  }
+
   if (statusDetails.inRelease) {
     const version = (
       <Version

static/app/types/group.tsx

@@ -714,6 +714,7 @@ export interface ResolvedStatusDetails {
   };
   inNextRelease?: boolean;
   inRelease?: string;
+  inUpcomingRelease?: boolean;
   repository?: string;
 }
 interface ReprocessingStatusDetails {