feat(preprod): add cards to build details #103470
Conversation
github-actions
bot
added
the
Scope: Frontend
mtopo27
changed the title
| } | ||
|
|
||
| function getWatchBreakdown( | ||
| primaryMetric: ReturnType<typeof getMainArtifactSizeMetric>, |
There was a problem hiding this comment.
What is this? Just type this as BuildDetailsSizeInfoSizeMetric | undefined
| export function BuildDetailsMetricCards(props: BuildDetailsMetricCardsProps) { | ||
| const {sizeInfo, processedInsights, totalSize, platform, onOpenInsightsSidebar} = props; | ||
|
|
||
| const labels = getLabels(platform ?? undefined); |
There was a problem hiding this comment.
Alot of this safety here (i.e. ?? undefined) and the checks below is quite tough to read. I'd recommend destructuring a bit, or early returns/error states if things are missing.
For example, I see sizeInfo && isSizeInfoCompleted(sizeInfo) used twice. If those aren't true, maybe we should just early return or log an error here. It's fine to make assumptions/assertions about the data being present as long as we log/exit. Overly defensive programming like this just leads to weird edge cases
mtopo27
force-pushed
the
mtopo27/add-metric-cards-to-build-details
branch
from
ae5692a to
1bcb819
Compare
| 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'; |
There was a problem hiding this comment.
file name in commit has capital B (locally it's lower case B, not sure what's going on here)
There was a problem hiding this comment.
Not sure I'm following this, all looks fine to me in the file diff.
There was a problem hiding this comment.
Oh wait, I see the file change name, as long as everything renders locally with pnpm run dev-ui I think you should be fine
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Bug: Loading Skeleton Layout Mismatch
The loading skeleton doesn't match the new layout structure after adding BuildDetailsMetricCards. The skeleton shows controls at the top, but the actual rendered content has metric cards first, then controls/chart/legend, then insights. This causes a layout shift when loading completes, resulting in poor user experience.
static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx#L119-L128
sentry/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx
Lines 119 to 128 in 0b9f967
| field: 'install_size_bytes' | 'download_size_bytes' | ||
| ): WatchBreakdown | undefined { | ||
| if (!primaryMetric || !watchMetric) { | ||
| return undefined; |
There was a problem hiding this comment.
No need to push a new commit but just for your reference, return; is the same as return undefined;. I usually prefer the former as it's one less thing to write.
| ${p => | ||
| p.$interactive | ||
| ? ` | ||
| text-decoration: underline dotted; |
There was a problem hiding this comment.
Not sure how important the cursor value is, but you can do underlined dotted text with <Text>: https://sentry.sentry.io/stories/typography/text#typographic-features
| label={card.title} | ||
| labelTooltip={card.labelTooltip} | ||
| action={ | ||
| card.showInsightsButton |
There was a problem hiding this comment.
Nit: I usually like to extract things like this out to a variable in a block above the return() statement. Something like:
let metricAction;
if (card.showInsightsButton) {
metricAction = { ... }
}
then this just becomes
<MetricCard
...
action={metricAction}
>
add top level metrics to build details
Screen.Recording.2025-11-17.at.2.27.48.PM.mov
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.