From bbfffd9881f4fd71786c6036fb07480fa016b60e Mon Sep 17 00:00:00 2001
From: Nelson Osacky <nelson.osacky@sentry.io>
Date: Fri, 28 Nov 2025 10:29:09 +0100
Subject: [PATCH 1/2] feat(preprod): Improve clarity on base build in
 comparison (EME-520)

Add two-line layout for build comparison UI with enhanced metadata:
- Display version, build number, and date on second line
- Increase text size from sm to md for better readability
- Add proper padding (lg) for improved visual spacing
- Align metadata text with build information above
---
 .../main/sizeCompareSelectedBuilds.tsx        | 91 +++++++++++++------
 1 file changed, 62 insertions(+), 29 deletions(-)

diff --git a/static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx b/static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx
index 9bea6d4b946c9b..7957300370a5e6 100644
--- a/static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx
+++ b/static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx
@@ -9,6 +9,7 @@ import {IconClose, IconCommit, IconFocus, IconLock, IconTelescope} from 'sentry/
 import {t} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {getFormat, getFormattedDate} from 'sentry/utils/dates';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
@@ -35,12 +36,34 @@ function BuildButton({
   const sha = buildDetails.vcs_info?.head_sha?.substring(0, 7);
   const branchName = buildDetails.vcs_info?.head_ref;
   const buildId = buildDetails.id;
+  const version = buildDetails.app_info?.version;
+  const buildNumber = buildDetails.app_info?.build_number;
+  const dateBuilt = buildDetails.app_info?.date_built;
+  const dateAdded = buildDetails.app_info?.date_added;
 
   const buildUrl = `/organizations/${organization.slug}/preprod/${projectId}/${buildId}/`;
   const platform = buildDetails.app_info?.platform ?? null;
 
+  const dateToShow = dateBuilt || dateAdded;
+  const formattedDate = getFormattedDate(
+    dateToShow,
+    getFormat({timeZone: true, year: true}),
+    {
+      local: true,
+    }
+  );
+
+  // Build metadata parts for the second line
+  const metadataParts = [formattedDate];
+  if (version) {
+    metadataParts.unshift(`Version ${version}`);
+  }
+  if (buildNumber) {
+    metadataParts.unshift(`Build ${buildNumber}`);
+  }
+
   return (
-    <LinkButton
+    <StyledLinkButton
       to={buildUrl}
       onClick={() =>
         trackAnalytics('preprod.builds.compare.go_to_build_details', {
@@ -53,12 +76,12 @@ function BuildButton({
         })
       }
     >
-      <Flex align="center" gap="sm">
-        {icon}
-        <Text size="sm" variant="accent" bold>
-          {label}
-        </Text>
-        <Flex align="center" gap="md">
+      <Flex direction="column" gap="xs">
+        <Flex align="center" gap="sm">
+          {icon}
+          <Text size="sm" variant="accent" bold>
+            {label}
+          </Text>
           <Text size="sm" variant="accent" bold>
             {`#${buildId}`}
           </Text>
@@ -70,33 +93,43 @@ function BuildButton({
               </Text>
             </Flex>
           )}
+          {branchName && (
+            <BuildBranch>
+              <Text size="sm" variant="muted">
+                {branchName}
+              </Text>
+            </BuildBranch>
+          )}
+          {onRemove && (
+            <Button
+              onClick={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                onRemove();
+              }}
+              size="zero"
+              priority="transparent"
+              borderless
+              aria-label={t('Clear base build')}
+              icon={<IconClose size="xs" color="purple400" />}
+            />
+          )}
+        </Flex>
+        <Flex align="center" gap="sm">
+          <Text size="sm" variant="muted">
+            {metadataParts.join(' • ')}
+          </Text>
         </Flex>
-        {branchName && (
-          <BuildBranch>
-            <Text size="sm" variant="muted">
-              {branchName}
-            </Text>
-          </BuildBranch>
-        )}
-        {onRemove && (
-          <Button
-            onClick={e => {
-              e.preventDefault();
-              e.stopPropagation();
-              onRemove();
-            }}
-            size="zero"
-            priority="transparent"
-            borderless
-            aria-label={t('Clear base build')}
-            icon={<IconClose size="xs" color="purple400" />}
-          />
-        )}
       </Flex>
-    </LinkButton>
+    </StyledLinkButton>
   );
 }
 
+const StyledLinkButton = styled(LinkButton)`
+  height: auto;
+  min-height: auto;
+`;
+
 const ComparisonContainer = styled(Flex)`
   flex-wrap: wrap;
   align-items: center;

From a71b5b6fef15b1ea06fcbf21d93e2a0fdd7eec3e Mon Sep 17 00:00:00 2001
From: Nelson Osacky <nelson.osacky@sentry.io>
Date: Fri, 28 Nov 2025 11:01:15 +0100
Subject: [PATCH 2/2] fix(preprod): Hide build ID when build number is present

Only show the build ID (#xxx) when there's no build_number to avoid
redundant information in the UI.
---
 .../buildComparison/main/sizeCompareSelectedBuilds.tsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx b/static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx
index 7957300370a5e6..fe978558697260 100644
--- a/static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx
+++ b/static/app/views/preprod/buildComparison/main/sizeCompareSelectedBuilds.tsx
@@ -82,9 +82,11 @@ function BuildButton({
           <Text size="sm" variant="accent" bold>
             {label}
           </Text>
-          <Text size="sm" variant="accent" bold>
-            {`#${buildId}`}
-          </Text>
+          {!buildNumber && (
+            <Text size="sm" variant="accent" bold>
+              {`#${buildId}`}
+            </Text>
+          )}
           {sha && (
             <Flex align="center" gap="xs">
               <IconCommit size="xs" />