feat(snapshots): Add diff threshold UI support

Author: NicoHinderling

src/sentry/preprod/api/endpoints/preprod_artifact_snapshot.py

@@ -435,6 +435,7 @@ def get(self, request: Request, organization: Organization, snapshot_id: str) ->
                 errored_count=len(categorized.errored),
                 comparison_run_info=run_info,
                 approval_info=approval_info,
+                diff_threshold=manifest.diff_threshold,
             ).dict()
         )
 

src/sentry/preprod/api/models/snapshots/project_preprod_snapshot_models.py

@@ -97,5 +97,7 @@ class SnapshotDetailsApiResponse(BaseModel):
 
     approval_info: SnapshotApprovalInfo | None = None
 
+    diff_threshold: float | None = None
+
 
 # TODO: POST request in the future when we migrate away from current schemas

static/app/views/preprod/snapshots/header/snapshotHeaderContent.tsx

@@ -7,7 +7,13 @@ import {ExternalLink} from '@sentry/scraps/link';
 import {Text} from '@sentry/scraps/text';
 
 import * as Layout from 'sentry/components/layouts/thirds';
-import {IconCommit, IconPullRequest, IconShow, IconStack} from 'sentry/icons';
+import {
+  IconCommit,
+  IconPullRequest,
+  IconSliders,
+  IconShow,
+  IconStack,
+} from 'sentry/icons';
 import type {SVGIconProps} from 'sentry/icons/svgIcon';
 import {t} from 'sentry/locale';
 import type {Theme} from 'sentry/utils/theme';
@@ -66,7 +72,8 @@ export function SnapshotHeaderContent({
     <Layout.HeaderContent>
       <Layout.Title>{t('Snapshot')}</Layout.Title>
 
-      {vcsItems.length > 0 && (
+      {(vcsItems.length > 0 ||
+        (data.diff_threshold !== null && data.diff_threshold !== undefined)) && (
         <Flex align="center" gap="lg" wrap="wrap">
           {vcsItems.map(item => (
             <Flex align="center" gap="xs" key={item.key}>
@@ -82,6 +89,17 @@ export function SnapshotHeaderContent({
               )}
             </Flex>
           ))}
+          {data.diff_threshold !== null && data.diff_threshold !== undefined && (
+            <Flex align="center" gap="xs">
+              <IconSliders size="xs" />
+              <Text size="sm" variant="muted">
+                {t(
+                  'Specified minimum diff: %s%%',
+                  parseFloat((data.diff_threshold * 100).toPrecision(10))
+                )}
+              </Text>
+            </Flex>
+          )}
         </Flex>
       )}
 

static/app/views/preprod/types/snapshotTypes.ts

@@ -52,6 +52,8 @@ export interface SnapshotDetailsApiResponse {
 
   approval_info?: SnapshotApprovalInfo | null;
 
+  diff_threshold?: number | null;
+
   // Diff fields
   added: SnapshotImage[];
   added_count: number;