feat(preprod): add cards to build details (#103470)

add top level metrics to build details


https://github.com/user-attachments/assets/589b1907-32ea-4bd1-bad3-08b5d2edc10c



### 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.

Author: mtopo27

static/app/views/preprod/buildComparison/main/BuildComparisonMetricCards.tsx renamed to static/app/views/preprod/buildComparison/main/buildComparisonMetricCards.tsx

@@ -25,6 +25,7 @@ interface ComparisonMetric {
   head: number;
   icon: ReactNode;
   key: string;
+  labelTooltip: string;
   percentageChange: number;
   title: string;
 }
@@ -47,6 +48,7 @@ export function BuildComparisonMetricCards(props: BuildComparisonMetricCardsProp
         key: 'install',
         title: labels.installSizeLabel,
         icon: <IconCode size="sm" />,
+        labelTooltip: labels.installSizeDescription,
         head: size_metric_diff_item.head_install_size,
         base: size_metric_diff_item.base_install_size,
         diff:
@@ -63,6 +65,7 @@ export function BuildComparisonMetricCards(props: BuildComparisonMetricCardsProp
         key: 'download',
         title: labels.downloadSizeLabel,
         icon: <IconDownload size="sm" />,
+        labelTooltip: labels.downloadSizeDescription,
         head: size_metric_diff_item.head_download_size,
         base: size_metric_diff_item.base_download_size,
         diff:
@@ -88,7 +91,12 @@ export function BuildComparisonMetricCards(props: BuildComparisonMetricCardsProp
         const {variant, icon} = getTrend(metric.diff);
 
         return (
-          <MetricCard key={metric.key} icon={metric.icon} label={metric.title}>
+          <MetricCard
+            key={metric.key}
+            icon={metric.icon}
+            label={metric.title}
+            labelTooltip={metric.labelTooltip}
+          >
             <Stack gap="xs">
               <Flex align="end" gap="sm" wrap="wrap">
                 <Heading as="h3">{formatBytesBase10(metric.head)}</Heading>

static/app/views/preprod/buildComparison/main/sizeCompareMainContent.tsx

@@ -17,7 +17,7 @@ import type RequestError from 'sentry/utils/requestError/requestError';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
-import {BuildComparisonMetricCards} from 'sentry/views/preprod/buildComparison/main/BuildComparisonMetricCards';
+import {BuildComparisonMetricCards} from 'sentry/views/preprod/buildComparison/main/buildComparisonMetricCards';
 import {SizeCompareItemDiffTable} from 'sentry/views/preprod/buildComparison/main/sizeCompareItemDiffTable';
 import {SizeCompareSelectedBuilds} from 'sentry/views/preprod/buildComparison/main/sizeCompareSelectedBuilds';
 import {BuildError} from 'sentry/views/preprod/components/buildError';

static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx

@@ -1,3 +1,5 @@
+import {useCallback} from 'react';
+import {useSearchParams} from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import {Alert} from '@sentry/scraps/alert';
@@ -13,6 +15,7 @@ import {t} from 'sentry/locale';
 import type {UseApiQueryResult} from 'sentry/utils/queryClient';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import {useQueryParamState} from 'sentry/utils/url/useQueryParamState';
+import {BuildDetailsMetricCards} from 'sentry/views/preprod/buildDetails/main/buildDetailsMetricCards';
 import {AppSizeInsights} from 'sentry/views/preprod/buildDetails/main/insights/appSizeInsights';
 import {BuildError} from 'sentry/views/preprod/components/buildError';
 import {BuildProcessing} from 'sentry/views/preprod/components/buildProcessing';
@@ -52,6 +55,12 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
     isError: isAppSizeError,
     error: appSizeError,
   } = appSizeQuery;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const openInsightsSidebar = useCallback(() => {
+    const next = new URLSearchParams(searchParams);
+    next.set('insights', 'open');
+    setSearchParams(next);
+  }, [searchParams, setSearchParams]);
 
   // If the main data fetch fails, this component will not be rendered
   // so we don't handle 'isBuildDetailsError'.
@@ -107,13 +116,21 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
 
   if (isLoadingRequests) {
     return (
-      <Stack gap="lg" width="100%">
-        <Flex width="100%" justify="between" align="center" gap="md">
-          <Placeholder width="92px" height="40px" />
-          <Placeholder style={{flex: 1}} height="40px" />
+      <Stack gap="xl" minHeight="700px" width="100%">
+        <Flex gap="lg" wrap="wrap">
+          <Placeholder style={{flex: 1}} height="100px" />
+          <Placeholder style={{flex: 1}} height="100px" />
+          <Placeholder style={{flex: 1}} height="100px" />
         </Flex>
-        <Placeholder width="100%" height="540px" />
-        <Placeholder height="140px" />
+        <Stack gap="sm">
+          <Flex width="100%" justify="between" align="center" gap="md">
+            <Placeholder width="92px" height="40px" />
+            <Placeholder style={{flex: 1}} height="40px" />
+          </Flex>
+          <Placeholder width="100%" height="540px" />
+          <Placeholder height="140px" />
+        </Stack>
+        <Placeholder height="200px" />
       </Stack>
     );
   }
@@ -204,7 +221,6 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
     appSizeData.insights && totalSize > 0
       ? processInsights(appSizeData.insights, totalSize)
       : [];
-
   const categoriesEnabled =
     appSizeData.treemap.category_breakdown &&
     Object.keys(appSizeData.treemap.category_breakdown).length > 0;
@@ -283,55 +299,63 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
   }
 
   return (
-    <Flex direction="column" gap="sm" minHeight="700px" width="100%">
-      <Flex align="center" gap="md">
-        {categoriesEnabled && (
-          <SegmentedControl value={selectedContent} onChange={handleContentChange}>
-            <SegmentedControl.Item key="treemap" icon={<IconGrid />} />
-            <SegmentedControl.Item key="categories" icon={<IconGraphCircle />} />
-          </SegmentedControl>
-        )}
-        {selectedContent === 'treemap' && (
-          <InputGroup style={{flexGrow: 1}}>
-            <InputGroup.LeadingItems>
-              <IconSearch />
-            </InputGroup.LeadingItems>
-            <InputGroup.Input
-              placeholder="Search files"
-              value={searchQuery || ''}
-              onChange={e => setSearchQuery(e.target.value || undefined)}
-            />
-            {searchQuery && (
-              <InputGroup.TrailingItems>
-                <Button
-                  onClick={() => setSearchQuery(undefined)}
-                  aria-label="Clear search"
-                  borderless
-                  size="zero"
-                >
-                  <IconClose size="sm" />
-                </Button>
-              </InputGroup.TrailingItems>
-            )}
-          </InputGroup>
-        )}
-      </Flex>
-      <ChartContainer>{visualizationContent}</ChartContainer>
+    <Stack gap="xl" minHeight="700px" width="100%">
+      <BuildDetailsMetricCards
+        sizeInfo={sizeInfo}
+        processedInsights={processedInsights}
+        totalSize={totalSize}
+        platform={buildDetailsData?.app_info?.platform ?? null}
+        onOpenInsightsSidebar={openInsightsSidebar}
+      />
 
-      <Stack gap="xl">
+      <Stack gap="sm">
+        <Flex align="center" gap="md">
+          {categoriesEnabled && (
+            <SegmentedControl value={selectedContent} onChange={handleContentChange}>
+              <SegmentedControl.Item key="treemap" icon={<IconGrid />} />
+              <SegmentedControl.Item key="categories" icon={<IconGraphCircle />} />
+            </SegmentedControl>
+          )}
+          {selectedContent === 'treemap' && (
+            <InputGroup style={{flexGrow: 1}}>
+              <InputGroup.LeadingItems>
+                <IconSearch />
+              </InputGroup.LeadingItems>
+              <InputGroup.Input
+                placeholder="Search files"
+                value={searchQuery || ''}
+                onChange={e => setSearchQuery(e.target.value || undefined)}
+              />
+              {searchQuery && (
+                <InputGroup.TrailingItems>
+                  <Button
+                    onClick={() => setSearchQuery(undefined)}
+                    aria-label="Clear search"
+                    borderless
+                    size="zero"
+                  >
+                    <IconClose size="sm" />
+                  </Button>
+                </InputGroup.TrailingItems>
+              )}
+            </InputGroup>
+          )}
+        </Flex>
+        <ChartContainer>{visualizationContent}</ChartContainer>
         {selectedContent === 'treemap' && appSizeData && (
           <AppSizeLegend
             root={appSizeData.treemap.root}
             selectedCategories={selectedCategories}
             onToggleCategory={handleToggleCategory}
           />
         )}
-        <AppSizeInsights
-          processedInsights={processedInsights}
-          platform={validatedPlatform(buildDetailsData?.app_info?.platform)}
-        />
       </Stack>
-    </Flex>
+
+      <AppSizeInsights
+        processedInsights={processedInsights}
+        platform={validatedPlatform(buildDetailsData?.app_info?.platform)}
+      />
+    </Stack>
   );
 }