feat(browser-starfish): add image icon (#63037)

static/app/icons/iconImage.tsx

@@ -0,0 +1,16 @@
+import {forwardRef} from 'react';
+
+import {SvgIcon, SVGIconProps} from './svgIcon';
+
+const IconImage = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref} viewBox="0 0 500 500">
+      <path d="M0 437.8c0 28.5 23.2 51.6 51.6 51.6h386.2c28.5 0 51.6-23.2 51.6-51.6V51.6c0-28.5-23.2-51.6-51.6-51.6H51.6C23.1 0 0 23.2 0 51.6v386.2zm437.8 27.1H51.6c-14.9 0-27.1-12.2-27.1-27.1v-64.5l92.8-92.8 79.3 79.3c4.8 4.8 12.5 4.8 17.3 0l143.2-143.2 107.8 107.8v113.4c0 14.9-12.2 27.1-27.1 27.1zM51.6 24.5h386.2c14.9 0 27.1 12.2 27.1 27.1v238.1l-99.2-99.1c-4.8-4.8-12.5-4.8-17.3 0L205.2 333.8l-79.3-79.3c-4.8-4.8-12.5-4.8-17.3 0l-84.1 84.1v-287c0-14.9 12.2-27.1 27.1-27.1z" />
+      <path d="M151.7 196.1c34.4 0 62.3-28 62.3-62.3s-28-62.3-62.3-62.3-62.3 28-62.3 62.3 27.9 62.3 62.3 62.3zm0-100.1c20.9 0 37.8 17 37.8 37.8s-17 37.8-37.8 37.8-37.8-17-37.8-37.8S130.8 96 151.7 96z" />
+    </SvgIcon>
+  );
+});
+
+IconImage.displayName = 'IconImage';
+
+export {IconImage};

static/app/icons/index.tsx

@@ -111,6 +111,7 @@ export {IconTelescope} from './iconTelescope';
 export {IconTerminal} from './iconTerminal';
 export {IconTimer} from './iconTimer';
 export {IconToggle} from './iconToggle';
+export {IconImage} from './iconImage';
 export {IconTrello} from './iconTrello';
 export {IconUnsubscribed} from './iconUnsubscribed';
 export {IconUpgrade} from './iconUpgrade';

static/app/views/performance/browser/resources/resourceSummaryPage/sampleImages.tsx

@@ -1,4 +1,4 @@
-import {CSSProperties, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
@@ -7,6 +7,7 @@ import {Button} from 'sentry/components/button';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import Link from 'sentry/components/links/link';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {IconImage} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {safeURL} from 'sentry/utils/url/safeURL';
@@ -132,6 +133,7 @@ function DisabledImages(props: {onClickShowLinks?: () => void}) {
   return (
     <div>
       <ChartPanelTextContainer>
+        <IconImage />
         <h6>{t('Images not shown')}</h6>
         {t(
           'You know, you can see the actual images that are on your site if you opt into this feature.'
@@ -157,18 +159,10 @@ function ImageContainer(props: {
   size: number;
   src: string;
 }) {
-  const theme = useTheme();
   const [hasError, setHasError] = useState(false);
 
   const {fileName, size, src, showImage = true} = props;
 
-  const commonStyles: CSSProperties = {
-    width: '100%',
-    height: '100%',
-    objectFit: 'contain',
-    objectPosition: 'center',
-  };
-
   return (
     <div style={{width: '100%', wordWrap: 'break-word'}}>
       {showImage && !hasError ? (
@@ -178,18 +172,51 @@ function ImageContainer(props: {
             height: imageHeight,
           }}
         >
-          <img onError={() => setHasError(true)} src={src} style={commonStyles} />
+          <img
+            onError={() => setHasError(true)}
+            src={src}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+              objectPosition: 'center',
+            }}
+          />
         </div>
       ) : (
-        <div
-          style={{width: imageWidth, height: imageHeight, backgroundColor: theme.gray100}}
-        />
+        <MissingImage />
       )}
       {fileName} (<ResourceSize bytes={size} />)
     </div>
   );
 }
 
+function MissingImage() {
+  const theme = useTheme();
+
+  return (
+    <div
+      style={{
+        background: theme.gray100,
+        width: imageWidth,
+        height: imageHeight,
+        position: 'relative',
+      }}
+    >
+      <IconImage
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          margin: 'auto',
+        }}
+      />
+    </div>
+  );
+}
+
 const getFileNameFromDescription = (description: string) => {
   const url = safeURL(description);