feat(mobile-exp): Show screenshots tab only for mobile platforms (#41073)

Show screenshots tab in the attachments tab
only for mobile platforms

static/app/views/organizationGroupDetails/groupEventAttachments/groupEventAttachments.spec.tsx

@@ -21,7 +21,7 @@ describe('GroupEventAttachments > Screenshots', function () {
   let getAttachmentsMock;
 
   beforeEach(function () {
-    project = TestStubs.Project();
+    project = TestStubs.Project({platform: 'apple-ios'});
     ProjectsStore.loadInitialData([project]);
     GroupStore.init();
 
@@ -34,7 +34,7 @@ describe('GroupEventAttachments > Screenshots', function () {
   afterEach(() => {});
 
   function renderGroupEventAttachments() {
-    return render(<GroupEventAttachments projectSlug={project.slug} />, {
+    return render(<GroupEventAttachments project={project} />, {
       context: routerContext,
       organization,
     });
@@ -52,6 +52,12 @@ describe('GroupEventAttachments > Screenshots', function () {
     );
   });
 
+  it('does not render screenshots tab if not mobile platform', function () {
+    project.platform = 'javascript';
+    renderGroupEventAttachments();
+    expect(screen.queryByText('Screenshots')).not.toBeInTheDocument();
+  });
+
   it('calls opens modal when clicking on panel body', function () {
     renderGroupEventAttachments();
     userEvent.click(screen.getByTestId('screenshot-1'));

static/app/views/organizationGroupDetails/groupEventAttachments/groupEventAttachments.tsx

@@ -13,7 +13,7 @@ import Pagination from 'sentry/components/pagination';
 import {Panel, PanelBody} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
-import {IssueAttachment} from 'sentry/types';
+import {IssueAttachment, Project} from 'sentry/types';
 import {decodeList} from 'sentry/utils/queryString';
 
 import GroupEventAttachmentsFilter, {
@@ -24,7 +24,7 @@ import GroupEventAttachmentsTable from './groupEventAttachmentsTable';
 import {ScreenshotCard} from './screenshotCard';
 
 type Props = {
-  projectSlug: string;
+  project: Project;
 } & WithRouterProps<{groupId: string; orgId: string}> &
   AsyncComponent['props'];
 
@@ -100,7 +100,7 @@ class GroupEventAttachments extends AsyncComponent<Props, State> {
   }
 
   handleDelete = async (deletedAttachmentId: string) => {
-    const {params, projectSlug} = this.props;
+    const {params, project} = this.props;
     const attachment = this.state?.eventAttachments?.find(
       item => item.id === deletedAttachmentId
     );
@@ -114,7 +114,7 @@ class GroupEventAttachments extends AsyncComponent<Props, State> {
 
     try {
       await this.api.requestPromise(
-        `/projects/${params.orgId}/${projectSlug}/events/${attachment.event_id}/attachments/${attachment.id}/`,
+        `/projects/${params.orgId}/${project.slug}/events/${attachment.event_id}/attachments/${attachment.id}/`,
         {
           method: 'DELETE',
         }
@@ -153,7 +153,7 @@ class GroupEventAttachments extends AsyncComponent<Props, State> {
   }
 
   renderInnerBody() {
-    const {projectSlug, params} = this.props;
+    const {project, params} = this.props;
     const {loading, eventAttachments, deletedAttachments} = this.state;
 
     if (loading) {
@@ -165,7 +165,7 @@ class GroupEventAttachments extends AsyncComponent<Props, State> {
         <GroupEventAttachmentsTable
           attachments={eventAttachments}
           orgId={params.orgId}
-          projectId={projectSlug}
+          projectId={project.slug}
           groupId={params.groupId}
           onDelete={this.handleDelete}
           deletedAttachments={deletedAttachments}
@@ -181,7 +181,7 @@ class GroupEventAttachments extends AsyncComponent<Props, State> {
   }
   renderScreenshotGallery() {
     const {eventAttachments, loading} = this.state;
-    const {projectSlug, params} = this.props;
+    const {project, params} = this.props;
 
     if (loading) {
       return <LoadingIndicator />;
@@ -196,7 +196,7 @@ class GroupEventAttachments extends AsyncComponent<Props, State> {
                 key={`${index}-${screenshot.id}`}
                 eventAttachment={screenshot}
                 eventId={screenshot.event_id}
-                projectSlug={projectSlug}
+                projectSlug={project.slug}
                 groupId={params.groupId}
                 onDelete={this.handleDelete}
                 pageLinks={this.state.eventAttachmentsPageLinks}
@@ -221,10 +221,11 @@ class GroupEventAttachments extends AsyncComponent<Props, State> {
   }
 
   renderBody() {
+    const {project} = this.props;
     return (
       <Layout.Body>
         <Layout.Main fullWidth>
-          <GroupEventAttachmentsFilter />
+          <GroupEventAttachmentsFilter project={project} />
           {this.getActiveAttachmentsTab() === EventAttachmentFilter.SCREENSHOTS
             ? this.renderScreenshotGallery()
             : this.renderAttachmentsTable()}

static/app/views/organizationGroupDetails/groupEventAttachments/groupEventAttachmentsFilter.tsx

@@ -8,12 +8,19 @@ import Button from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
+import {Project} from 'sentry/types';
+import {isMobilePlatform} from 'sentry/utils/platform';
 import useOrganization from 'sentry/utils/useOrganization';
 
 const crashReportTypes = ['event.minidump', 'event.applecrashreport'];
 const SCREENSHOT_TYPE = 'event.screenshot';
 
-const GroupEventAttachmentsFilter = (props: WithRouterProps) => {
+type Props = {
+  project: Project;
+} & WithRouterProps;
+
+const GroupEventAttachmentsFilter = (props: Props) => {
+  const {project} = props;
   const {query, pathname} = props.location;
   const {types} = query;
   const allAttachmentsQuery = omit(query, 'types');
@@ -45,15 +52,16 @@ const GroupEventAttachmentsFilter = (props: WithRouterProps) => {
         <Button barId="all" size="sm" to={{pathname, query: allAttachmentsQuery}}>
           {t('All Attachments')}
         </Button>
-        {organization.features.includes('mobile-screenshot-gallery') && (
-          <Button
-            barId="screenshot"
-            size="sm"
-            to={{pathname, query: onlyScreenshotQuery}}
-          >
-            {t('Screenshots')}
-          </Button>
-        )}
+        {organization.features.includes('mobile-screenshot-gallery') &&
+          isMobilePlatform(project.platform) && (
+            <Button
+              barId="screenshot"
+              size="sm"
+              to={{pathname, query: onlyScreenshotQuery}}
+            >
+              {t('Screenshots')}
+            </Button>
+          )}
         <Button barId="onlyCrash" size="sm" to={{pathname, query: onlyCrashReportsQuery}}>
           {t('Only Crash Reports')}
         </Button>

static/app/views/organizationGroupDetails/groupEventAttachments/index.tsx

@@ -21,7 +21,7 @@ const GroupEventAttachmentsContainer = ({organization, group}: Props) => (
       <FeatureDisabled {...props} featureName={t('Event Attachments')} />
     )}
   >
-    <GroupEventAttachments projectSlug={group.project.slug} />
+    <GroupEventAttachments project={group.project} />
   </Feature>
 );