fix(replays): remove replay from desktop and mobile projects (#54749)

Fixes #49464 by removing
replay buttons/references in Issues, for projects that are mobile or
desktop.

### **Issue details:**
BEFORE
<img width="885" alt="SCR-20230815-jouw"
src="https://github.com/getsentry/sentry/assets/56095982/0724eec1-f5e3-41ad-8ec4-62aac86584e9">

AFTER
<img width="773" alt="SCR-20230814-simc"
src="https://github.com/getsentry/sentry/assets/56095982/420fdb48-cdf2-4a61-af0c-d5853eafb04e">

### **All events table:**
BEFORE
<img width="1138" alt="SCR-20230815-joqh"
src="https://github.com/getsentry/sentry/assets/56095982/a08aebbb-05cc-4a8f-944f-ff8b3f84d343">

AFTER
<img width="1126" alt="SCR-20230815-josn"
src="https://github.com/getsentry/sentry/assets/56095982/9f443d84-68d2-49cc-9056-4fc1e8fe4b14">

Author: michellewzhang

static/app/components/eventOrGroupExtraDetails.tsx

@@ -16,6 +16,7 @@ import {tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Group, Organization} from 'sentry/types';
 import {Event} from 'sentry/types/event';
+import {projectCanLinkToReplay} from 'sentry/utils/replays/projectSupportsReplay';
 import withOrganization from 'sentry/utils/withOrganization';
 
 type Props = {
@@ -51,7 +52,8 @@ function EventOrGroupExtraDetails({
 
   const issuesPath = `/organizations/${organization.slug}/issues/`;
 
-  const showReplayCount = organization.features.includes('session-replay');
+  const showReplayCount =
+    organization.features.includes('session-replay') && projectCanLinkToReplay(project);
   const hasEscalatingIssuesUi = organization.features.includes('escalating-issues');
 
   return (

static/app/views/issueDetails/allEventsTable.tsx

@@ -14,6 +14,7 @@ import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import {platformToCategory} from 'sentry/utils/platform';
 import {useApiQuery} from 'sentry/utils/queryClient';
+import {projectCanLinkToReplay} from 'sentry/utils/replays/projectSupportsReplay';
 import {useRoutes} from 'sentry/utils/useRoutes';
 import EventsTable from 'sentry/views/performance/transactionSummary/transactionEvents/eventsTable';
 
@@ -107,7 +108,9 @@ type ColumnInfo = {columnTitles: string[]; fields: string[]};
 
 const getColumns = (group: Group, organization: Organization): ColumnInfo => {
   const isPerfIssue = group.issueCategory === IssueCategory.PERFORMANCE;
-  const isReplayEnabled = organization.features.includes('session-replay');
+  const isReplayEnabled =
+    organization.features.includes('session-replay') &&
+    projectCanLinkToReplay(group.project);
 
   // profiles only exist on transactions, so this only works with
   // performance issues, and not errors

static/app/views/issueDetails/groupEventCarousel.tsx

@@ -35,6 +35,7 @@ import {
   getShortEventId,
 } from 'sentry/utils/events';
 import getDynamicText from 'sentry/utils/getDynamicText';
+import {projectCanLinkToReplay} from 'sentry/utils/replays/projectSupportsReplay';
 import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
 import {useLocation} from 'sentry/utils/useLocation';
 import useMedia from 'sentry/utils/useMedia';
@@ -246,7 +247,9 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
   const xlargeViewport = useMedia(`(min-width: ${theme.breakpoints.xlarge})`);
 
   const hasReplay = Boolean(event?.tags?.find(({key}) => key === 'replayId')?.value);
-  const isReplayEnabled = organization.features.includes('session-replay');
+  const isReplayEnabled =
+    organization.features.includes('session-replay') &&
+    projectCanLinkToReplay(group.project);
   const latencyThreshold = 30 * 60 * 1000; // 30 minutes
   const isOverLatencyThreshold =
     event.dateReceived &&

static/app/views/issueDetails/header.spec.tsx

@@ -9,9 +9,11 @@ import {ReprocessingStatus} from 'sentry/views/issueDetails/utils';
 describe('groupDetails', () => {
   const baseUrl = 'BASE_URL/';
   const organization = TestStubs.Organization();
-  const project = TestStubs.Project({teams: [TestStubs.Team()]});
+  const project = TestStubs.Project({
+    teams: [TestStubs.Team()],
+  });
 
-  describe('issue category: error', () => {
+  describe('issue category: error, js project', () => {
     const defaultProps = {
       organization,
       baseUrl,
@@ -22,17 +24,28 @@ describe('groupDetails', () => {
 
     it('displays the correct tabs with all features enabled', async () => {
       const orgWithFeatures = TestStubs.Organization({
-        features: ['similarity-view', 'event-attachments'],
+        features: ['similarity-view', 'event-attachments', 'session-replay'],
       });
-      const projectWithSimilarityView = TestStubs.Project({
+      const jsProjectWithSimilarityView = TestStubs.Project({
         features: ['similarity-view'],
+        platform: 'javascript',
+      });
+
+      const MOCK_GROUP = TestStubs.Group();
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/replay-count/`,
+        method: 'GET',
+        body: {
+          [MOCK_GROUP.id]: ['replay42', 'replay256'],
+        },
       });
 
       render(
         <GroupHeader
           {...defaultProps}
           organization={orgWithFeatures}
-          project={projectWithSimilarityView}
+          project={jsProjectWithSimilarityView}
         />,
         {organization: orgWithFeatures}
       );
@@ -61,8 +74,54 @@ describe('groupDetails', () => {
       await userEvent.click(screen.getByRole('tab', {name: /merged issues/i}));
       expect(browserHistory.push).toHaveBeenCalledWith('BASE_URL/merged/');
 
+      await userEvent.click(screen.getByRole('tab', {name: /replays/i}));
+      expect(browserHistory.push).toHaveBeenCalledWith('BASE_URL/replays/');
+
+      expect(screen.queryByRole('tab', {name: /replays/i})).toBeInTheDocument();
+    });
+  });
+
+  describe('issue category: error, mobile project', () => {
+    const defaultProps = {
+      organization,
+      baseUrl,
+      group: TestStubs.Group({issueCategory: IssueCategory.ERROR}),
+      groupReprocessingStatus: ReprocessingStatus.NO_STATUS,
+      project,
+    };
+
+    it('displays the correct tabs with all features enabled', async () => {
+      const orgWithFeatures = TestStubs.Organization({
+        features: ['similarity-view', 'event-attachments', 'session-replay'],
+      });
+      const mobileProjectWithSimilarityView = TestStubs.Project({
+        features: ['similarity-view'],
+        platform: 'apple-ios',
+      });
+
+      const MOCK_GROUP = TestStubs.Group();
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/replay-count/`,
+        method: 'GET',
+        body: {
+          [MOCK_GROUP.id]: ['replay42', 'replay256'],
+        },
+      });
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          organization={orgWithFeatures}
+          project={mobileProjectWithSimilarityView}
+        />,
+        {organization: orgWithFeatures}
+      );
+
       await userEvent.click(screen.getByRole('tab', {name: /similar issues/i}));
       expect(browserHistory.push).toHaveBeenCalledWith('BASE_URL/similar/');
+
+      expect(screen.queryByRole('tab', {name: /replays/i})).not.toBeInTheDocument();
     });
   });
 

static/app/views/issueDetails/header.tsx

@@ -24,6 +24,7 @@ import {space} from 'sentry/styles/space';
 import {Event, Group, Organization, Project} from 'sentry/types';
 import {getMessage} from 'sentry/utils/events';
 import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
+import {projectCanLinkToReplay} from 'sentry/utils/replays/projectSupportsReplay';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -66,7 +67,8 @@ function GroupHeaderTabs({
 
   const hasSimilarView = projectFeatures.has('similarity-view');
   const hasEventAttachments = organizationFeatures.has('event-attachments');
-  const hasReplaySupport = organizationFeatures.has('session-replay');
+  const hasReplaySupport =
+    organizationFeatures.has('session-replay') && projectCanLinkToReplay(project);
 
   const issueTypeConfig = getConfigForIssueType(group);