ref(images-loaded): Add new display condition (#24664)

src/sentry/static/sentry/app/components/events/interfaces/debugMeta-v2/index.tsx

@@ -36,6 +36,7 @@ import {
   getFileName,
   IMAGE_AND_CANDIDATE_LIST_MAX_HEIGHT,
   normalizeId,
+  shouldSkipSection,
 } from './utils';
 
 const IMAGE_INFO_UNAVAILABLE = '-1';
@@ -208,6 +209,12 @@ class DebugMeta extends React.PureComponent<Props, State> {
   }
 
   openImageDetailsModal = async () => {
+    const {filteredImages} = this.state;
+
+    if (!filteredImages.length) {
+      return;
+    }
+
     const {location, organization, projectId, groupId, event} = this.props;
     const {query} = location;
 
@@ -217,7 +224,6 @@ class DebugMeta extends React.PureComponent<Props, State> {
       return;
     }
 
-    const {filteredImages} = this.state;
     const image =
       imageCodeId !== IMAGE_INFO_UNAVAILABLE || imageDebugId !== IMAGE_INFO_UNAVAILABLE
         ? filteredImages.find(
@@ -278,7 +284,14 @@ class DebugMeta extends React.PureComponent<Props, State> {
     // There are a bunch of images in debug_meta that are not relevant to this
     // component. Filter those out to reduce the noise. Most importantly, this
     // includes proguard images, which are rendered separately.
-    const relevantImages = images.filter(this.isValidImage).map(releventImage => {
+
+    const relevantImages = images.filter(this.isValidImage);
+
+    if (!relevantImages.length) {
+      return;
+    }
+
+    const formattedRelevantImages = relevantImages.map(releventImage => {
       const {debug_status, unwind_status} = releventImage as Image;
       return {
         ...releventImage,
@@ -289,13 +302,13 @@ class DebugMeta extends React.PureComponent<Props, State> {
     // Sort images by their start address. We assume that images have
     // non-overlapping ranges. Each address is given as hex string (e.g.
     // "0xbeef").
-    relevantImages.sort(
+    formattedRelevantImages.sort(
       (a, b) => parseAddress(a.image_addr) - parseAddress(b.image_addr)
     );
 
     const unusedImages: Images = [];
 
-    const usedImages = relevantImages.filter(image => {
+    const usedImages = formattedRelevantImages.filter(image => {
       if (image.debug_status === ImageStatus.UNUSED) {
         unusedImages.push(image as Images[0]);
         return false;
@@ -503,8 +516,14 @@ class DebugMeta extends React.PureComponent<Props, State> {
       searchTerm,
       filterOptions,
       scrollbarWidth,
-      filteredImagesByFilter: images,
+      filteredImagesByFilter: filteredImages,
     } = this.state;
+    const {data} = this.props;
+    const {images} = data;
+
+    if (shouldSkipSection(filteredImages, images)) {
+      return null;
+    }
 
     const displayFilter = (Object.values(filterOptions ?? {})[0] ?? []).length > 1;
 
@@ -542,7 +561,7 @@ class DebugMeta extends React.PureComponent<Props, State> {
         isCentered
       >
         <StyledPanelTable
-          isEmpty={!images.length}
+          isEmpty={!filteredImages.length}
           scrollbarWidth={scrollbarWidth}
           headers={[t('Status'), t('Image'), t('Processing'), t('Details'), '']}
           {...this.getEmptyMessage()}

src/sentry/static/sentry/app/components/events/interfaces/debugMeta-v2/utils.tsx

@@ -1,4 +1,5 @@
-import {ImageStatus} from 'app/types/debugImage';
+import {Image, ImageStatus} from 'app/types/debugImage';
+import {defined} from 'app/utils';
 
 export const IMAGE_AND_CANDIDATE_LIST_MAX_HEIGHT = 400;
 
@@ -37,3 +38,25 @@ export function getFileName(path?: string | null) {
 export function normalizeId(id?: string) {
   return id?.trim().toLowerCase().replace(/[- ]/g, '') ?? '';
 }
+
+// TODO(ts): When replacing debugMeta with debugMetaV2, also replace {type: string} with the Image type defined in 'app/types/debugImage'
+export function shouldSkipSection(
+  filteredImages: Array<{type: string}>,
+  images: Array<{type: string} | null>
+) {
+  if (!!filteredImages.length) {
+    return false;
+  }
+
+  const definedImages = images.filter(image => defined(image));
+
+  if (!definedImages.length) {
+    return true;
+  }
+
+  if ((definedImages as Array<Image>).every(image => image.type === 'proguard')) {
+    return true;
+  }
+
+  return false;
+}

src/sentry/static/sentry/app/components/events/interfaces/debugMeta/index.tsx

@@ -26,6 +26,8 @@ import {Frame, Organization, Project} from 'app/types';
 import {Event} from 'app/types/event';
 import EmptyMessage from 'app/views/settings/components/emptyMessage';
 
+import {shouldSkipSection} from '../debugMeta-v2/utils';
+
 import DebugImage from './debugImage';
 import {getFileName} from './utils';
 
@@ -192,6 +194,11 @@ class DebugMeta extends React.PureComponent<Props, State> {
     const foundFrame = this.getFrame();
     // skip null values indicating invalid debug images
     const debugImages = this.getDebugImages();
+
+    if (!debugImages.length) {
+      return;
+    }
+
     const filteredImages = debugImages.filter(image => this.filterImage(image));
 
     this.setState({debugImages, filteredImages, foundFrame});
@@ -406,6 +413,12 @@ class DebugMeta extends React.PureComponent<Props, State> {
 
   render() {
     const {filteredImages, foundFrame} = this.state;
+    const {data} = this.props;
+    const {images} = data;
+
+    if (shouldSkipSection(filteredImages, images)) {
+      return null;
+    }
 
     return (
       <StyledEventDataSection