Add app icon display to Preprod Build Details sidebar

[jasonyuezhang]

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

---

Copied from getsentry#102118
Original PR: getsentry#102118

[propel-test-bot]

Display uploaded app icon in build-details sidebar

Adds front-end support for rendering the specific app icon, if it exists, in the pre-production build details sidebar. The component now derives an icon URL using the app_icon_id, organization slug, and project ID, falls back to a styled placeholder when the icon is absent, and updates styling accordingly. The corresponding API response type is extended to include app_icon_id.

Key Changes

• Added useOrganization to static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx for slug retrieval
• Computed iconUrl from /api/0/projects/${organization.slug}/${projectId}/files/app-icons/${app_icon_id}/
• Replaced removed AppIcon wrapper with direct <img> tag and enhanced AppIconPlaceholder styling
• Extended interface BuildDetailsAppInfo in static/app/views/preprod/types/buildDetailsTypes.ts with optional app_icon_id

Affected Areas

• static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx
• static/app/views/preprod/types/buildDetailsTypes.ts

This summary was automatically generated by @propel-code-bot

[propel-test-bot]

[BestPractice]

Missing error handling for image loading: If the constructed iconUrl is invalid or the image fails to load, users will see a broken image. Add error handling to fallback to the placeholder:

const [imageError, setImageError] = useState(false);

// In the JSX:
{iconUrl && !imageError && (
  <img 
    src={iconUrl} 
    alt="App Icon" 
    width={24} 
    height={24}
    onError={() => setImageError(true)}
  />
)}
{(!iconUrl || imageError) && (
  <AppIconPlaceholder>{props.appInfo.name?.charAt(0) || ''}</AppIconPlaceholder>
)}

Note: You'll need to add import {useState} from 'react'; at the top of the file.

Context for Agents

[**BestPractice**]

Missing error handling for image loading: If the constructed `iconUrl` is invalid or the image fails to load, users will see a broken image. Add error handling to fallback to the placeholder:

```typescript
const [imageError, setImageError] = useState(false);

// In the JSX:
{iconUrl && !imageError && (
  <img 
    src={iconUrl} 
    alt="App Icon" 
    width={24} 
    height={24}
    onError={() => setImageError(true)}
  />
)}
{(!iconUrl || imageError) && (
  <AppIconPlaceholder>{props.appInfo.name?.charAt(0) || ''}</AppIconPlaceholder>
)}
```

Note: You'll need to add `import {useState} from 'react';` at the top of the file.

File: static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx
Line: 88

[propel-test-bot]

[BestPractice]

Missing accessibility attributes: The <img> element should include proper accessibility attributes for better screen reader support:

Suggested change

	{iconUrl && <img src={iconUrl} alt="App Icon" width={24} height={24} />}
	{iconUrl && <img src={iconUrl} alt={props.appInfo.name ? `${props.appInfo.name} app icon` : 'App icon'} width={24} height={24} />}

⚡ Committable suggestion

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Context for Agents

[**BestPractice**]

Missing accessibility attributes: The `<img>` element should include proper accessibility attributes for better screen reader support:

```suggestion
        {iconUrl && <img src={iconUrl} alt={props.appInfo.name ? `${props.appInfo.name} app icon` : 'App icon'} width={24} height={24} />}
```

⚡ **Committable suggestion**

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

File: static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx
Line: 85