fix(issues): Properly display image with mimetype octet stream

static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx

@@ -1,42 +1,64 @@
 import ImageViewer from 'sentry/components/events/attachmentViewers/imageViewer';
 import JsonViewer from 'sentry/components/events/attachmentViewers/jsonViewer';
 import LogFileViewer from 'sentry/components/events/attachmentViewers/logFileViewer';
-import RRWebJsonViewer from 'sentry/components/events/attachmentViewers/rrwebJsonViewer';
+import type RRWebJsonViewer from 'sentry/components/events/attachmentViewers/rrwebJsonViewer';
 import {WebMViewer} from 'sentry/components/events/attachmentViewers/webmViewer';
 import type {IssueAttachment} from 'sentry/types/group';
 
-export const getInlineAttachmentRenderer = (
-  attachment: IssueAttachment
-):
+export const imageMimeTypes = [
+  'application/octet-stream',
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+];
+
+const logFileMimeTypes = [
+  'text/css',
+  'text/csv',
+  'text/html',
+  'text/javascript',
+  'text/plain',
+];
+
+const jsonMimeTypes = [
+  'application/json',
+  'application/ld+json',
+  'text/json',
+  'text/x-json',
+];
+
+export const webmMimeType = 'video/webm';
+
+type AttachmentRenderer =
   | typeof ImageViewer
   | typeof LogFileViewer
   | typeof RRWebJsonViewer
-  | typeof WebMViewer
-  | undefined => {
-  switch (attachment.mimetype) {
-    case 'text/css':
-    case 'text/csv':
-    case 'text/html':
-    case 'text/javascript':
-    case 'text/plain':
-      return attachment.size > 0 ? LogFileViewer : undefined;
-    case 'application/json':
-    case 'application/ld+json':
-    case 'text/json':
-    case 'text/x-json':
-      if (attachment.name === 'rrweb.json' || attachment.name.startsWith('rrweb-')) {
-        return RRWebJsonViewer;
-      }
-      return JsonViewer;
-    case 'image/jpeg':
-    case 'image/png':
-    case 'image/gif':
-      return ImageViewer;
-    case 'video/webm':
-      return WebMViewer;
-    default:
-      return undefined;
+  | typeof WebMViewer;
+
+export const getInlineAttachmentRenderer = (
+  attachment: IssueAttachment
+): AttachmentRenderer | undefined => {
+  if (imageMimeTypes.includes(attachment.mimetype)) {
+    return ImageViewer;
+  }
+
+  if (logFileMimeTypes.includes(attachment.mimetype)) {
+    return LogFileViewer;
+  }
+
+  if (
+    (jsonMimeTypes.includes(attachment.mimetype) && attachment.name === 'rrweb.json') ||
+    attachment.name.startsWith('rrweb-')
+  ) {
+    return JsonViewer;
+  }
+
+  if (webmMimeType === attachment.mimetype) {
+    return WebMViewer;
   }
+
+  return undefined;
 };
 
 export const hasInlineAttachmentRenderer = (attachment: IssueAttachment): boolean => {

static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx

@@ -8,7 +8,11 @@ import {openConfirmModal} from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
-import {getInlineAttachmentRenderer} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes';
+import {
+  getInlineAttachmentRenderer,
+  imageMimeTypes,
+  webmMimeType,
+} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
@@ -37,14 +41,6 @@ type Props = {
   onlyRenderScreenshot?: boolean;
 };
 
-const loadingMimeTypes = [
-  'image/jpeg',
-  'image/png',
-  'image/gif',
-  'image/webp',
-  'video/webm',
-];
-
 function Screenshot({
   eventId,
   organization,
@@ -59,9 +55,13 @@ function Screenshot({
   openVisualizationModal,
 }: Props) {
   const [loadingImage, setLoadingImage] = useState(
-    loadingMimeTypes.includes(screenshot.mimetype)
+    imageMimeTypes.includes(screenshot.mimetype) || webmMimeType === screenshot.mimetype
   );
+
   const {hasRole} = useRole({role: 'attachmentsRole'});
+  if (!hasRole) {
+    return null;
+  }
 
   function handleDelete(screenshotAttachmentId: string) {
     trackAnalytics('issue_details.issue_tab.screenshot_dropdown_deleted', {
@@ -70,10 +70,6 @@ function Screenshot({
     onDelete(screenshotAttachmentId);
   }
 
-  if (!hasRole) {
-    return null;
-  }
-
   function renderContent(screenshotAttachment: EventAttachment) {
     const AttachmentComponent = getInlineAttachmentRenderer(screenshotAttachment)!;
 
@@ -182,10 +178,6 @@ function Screenshot({
     );
   }
 
-  if (!hasRole) {
-    return null;
-  }
-
   return <StyledPanel>{renderContent(screenshot)}</StyledPanel>;
 }