From 7c4d24038781c22951d181d4519c9860e0c6e6ce Mon Sep 17 00:00:00 2001
From: Hector <hector@emergetools.com>
Date: Fri, 10 Oct 2025 18:00:32 +0100
Subject: [PATCH] fix(ui): Make build details more like release details

Partial fix for EME-318
---
 .../header/buildDetailsHeaderContent.tsx      | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/static/app/views/preprod/buildDetails/header/buildDetailsHeaderContent.tsx b/static/app/views/preprod/buildDetails/header/buildDetailsHeaderContent.tsx
index 735189c0963c1f..6c46ae5137239f 100644
--- a/static/app/views/preprod/buildDetails/header/buildDetailsHeaderContent.tsx
+++ b/static/app/views/preprod/buildDetails/header/buildDetailsHeaderContent.tsx
@@ -1,11 +1,14 @@
+import React from 'react';
 import {Link} from 'react-router-dom';
 
 import {Breadcrumbs, type Crumb} from 'sentry/components/breadcrumbs';
 import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
-import {Heading} from 'sentry/components/core/text';
 import DropdownButton from 'sentry/components/dropdownButton';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import IdBadge from 'sentry/components/idBadge';
+import * as Layout from 'sentry/components/layouts/thirds';
+import Version from 'sentry/components/version';
 import {IconEllipsis, IconTelescope} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -98,7 +101,7 @@ export function BuildDetailsHeaderContent(props: BuildDetailsHeaderContentProps)
   if (buildDetailsData.app_info.version) {
     breadcrumbs.push({
       to: makeReleasesUrl(project?.id, {
-        version: buildDetailsData.app_info.version ?? undefined,
+        version: buildDetailsData.app_info.version,
         appId: buildDetailsData.app_info.app_id ?? undefined,
       }),
       label: buildDetailsData.app_info.version,
@@ -115,13 +118,19 @@ export function BuildDetailsHeaderContent(props: BuildDetailsHeaderContentProps)
     isSentryEmployee,
   });
 
+  const version = `v${buildDetailsData.app_info.version ?? 'Unknown'} (${buildDetailsData.app_info.build_number ?? 'Unknown'})`;
+
   return (
-    <Flex direction="column" padding="0 0 xl 0">
-      <Breadcrumbs crumbs={breadcrumbs} />
-      <Flex align="center" justify="between" gap="md">
-        <Heading as="h1">
-          v{buildDetailsData.app_info.version} ({buildDetailsData.app_info.build_number})
-        </Heading>
+    <React.Fragment>
+      <Layout.HeaderContent>
+        <Breadcrumbs crumbs={breadcrumbs} />
+        <Layout.Title>
+          {project && <IdBadge project={project} avatarSize={28} hideName />}
+          <Version version={version} anchor={false} truncate />
+        </Layout.Title>
+      </Layout.HeaderContent>
+
+      <Layout.HeaderActions>
         <Flex align="center" gap="sm" flexShrink={0}>
           <Link
             to={`/organizations/${organization.slug}/preprod/${projectId}/compare/${buildDetailsData.id}/`}
@@ -145,7 +154,7 @@ export function BuildDetailsHeaderContent(props: BuildDetailsHeaderContentProps)
             )}
           />
         </Flex>
-      </Flex>
-    </Flex>
+      </Layout.HeaderActions>
+    </React.Fragment>
   );
 }