Add group field to manifest data and use in frontend

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

@@ -157,6 +157,7 @@ def get(self, request: Request, project: Project, snapshot_id: str) -> Response:
                 key=key,
                 display_name=metadata.display_name,
                 image_file_name=metadata.image_file_name,
+                group=metadata.group,
                 width=metadata.width,
                 height=metadata.height,
             )

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

@@ -22,6 +22,7 @@ class SnapshotImageResponse(BaseModel):
     key: str
     display_name: str | None = None
     image_file_name: str
+    group: str | None = None
     width: int
     height: int
 

src/sentry/preprod/snapshots/manifest.py

@@ -6,6 +6,7 @@
 class ImageMetadata(BaseModel):
     display_name: str | None = None
     image_file_name: str
+    group: str | None = None
     width: int = Field(ge=0)
     height: int = Field(ge=0)
 

static/app/views/preprod/snapshots/main/snapshotMainContent.tsx

@@ -11,23 +11,23 @@ import {SingleImageDisplay} from './imageDisplay/singleImageDisplay';
 
 interface SnapshotMainContentProps {
   currentGroupImages: SnapshotImage[];
-  currentGroupName: string | null;
+  currentGroupKey: string | null;
   onVariantChange: (index: number) => void;
   organizationSlug: string;
   projectSlug: string;
   variantIndex: number;
 }
 
 export function SnapshotMainContent({
-  currentGroupName,
+  currentGroupKey,
   currentGroupImages,
   variantIndex,
   onVariantChange,
   organizationSlug,
   projectSlug,
 }: SnapshotMainContentProps) {
   const selectedImage = currentGroupImages[variantIndex];
-  if (!currentGroupName || !selectedImage) {
+  if (!currentGroupKey || !selectedImage) {
     return (
       <Flex align="center" justify="center" padding="3xl">
         <Text variant="muted">{t('Select an image from the sidebar.')}</Text>
@@ -64,7 +64,7 @@ export function SnapshotMainContent({
         )}
         <Stack gap="md">
           <Text size="lg" bold>
-            {displayName}
+            {currentGroupKey}
           </Text>
           {totalVariants > 1 && (
             <Text variant="muted" size="sm">

static/app/views/preprod/snapshots/sidebar/snapshotSidebarContent.tsx

@@ -12,22 +12,22 @@ import {t} from 'sentry/locale';
 import type {SnapshotImage} from 'sentry/views/preprod/types/snapshotTypes';
 
 interface SnapshotSidebarContentProps {
-  currentGroupName: string | null;
+  currentGroupKey: string | null;
   fetchNextPage: () => Promise<unknown>;
   filteredGroups: Map<string, SnapshotImage[]>;
   hasNextPage: boolean;
   isFetchingNextPage: boolean;
   onSearchChange: (query: string) => void;
-  onSelectGroupName: (name: string) => void;
+  onSelectGroupKey: (key: string) => void;
   searchQuery: string;
 }
 
 export function SnapshotSidebarContent({
   filteredGroups,
-  currentGroupName,
+  currentGroupKey,
   searchQuery,
   onSearchChange,
-  onSelectGroupName,
+  onSelectGroupKey,
   hasNextPage,
   isFetchingNextPage,
   fetchNextPage,
@@ -68,21 +68,21 @@ export function SnapshotSidebarContent({
         </InputGroup>
       </Container>
       <Stack overflow="auto" flex="1">
-        {[...filteredGroups.entries()].map(([name, images]) => {
-          const isSelected = name === currentGroupName;
+        {[...filteredGroups.entries()].map(([groupKey, images]) => {
+          const isSelected = groupKey === currentGroupKey;
           return (
             <SidebarItem
-              key={name}
+              key={groupKey}
               isSelected={isSelected}
-              onClick={() => onSelectGroupName(name)}
+              onClick={() => onSelectGroupKey(groupKey)}
             >
               <Text
                 size="md"
                 variant={isSelected ? 'accent' : 'muted'}
                 bold={isSelected}
                 ellipsis
               >
-                {name}
+                {groupKey}
               </Text>
               <Tag variant="muted">{images.length}</Tag>
             </SidebarItem>

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

@@ -50,7 +50,7 @@ export default function SnapshotsPage() {
     });
 
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedGroupName, setSelectedGroupName] = useState<string | null>(null);
+  const [selectedGroupKey, setSelectedGroupKey] = useState<string | null>(null);
   const [variantIndex, setVariantIndex] = useState(0);
 
   const firstPageData = data?.pages[0]?.[0];
@@ -62,12 +62,12 @@ export default function SnapshotsPage() {
     const allImages = data.pages.flatMap(page => page[0].images);
     const groups = new Map<string, SnapshotImage[]>();
     for (const image of allImages) {
-      const name = image.display_name ?? image.image_file_name;
-      const existing = groups.get(name);
+      const groupKey = image.group ?? image.image_file_name;
+      const existing = groups.get(groupKey);
       if (existing) {
         existing.push(image);
       } else {
-        groups.set(name, [image]);
+        groups.set(groupKey, [image]);
       }
     }
     return new Map([...groups.entries()].sort(([a], [b]) => a.localeCompare(b)));
@@ -79,25 +79,25 @@ export default function SnapshotsPage() {
     }
     const query = searchQuery.toLowerCase();
     const filtered = new Map<string, SnapshotImage[]>();
-    for (const [name, images] of groupedImages) {
-      if (name.toLowerCase().includes(query)) {
-        filtered.set(name, images);
+    for (const [groupKey, images] of groupedImages) {
+      if (groupKey.toLowerCase().includes(query)) {
+        filtered.set(groupKey, images);
       }
     }
     return filtered;
   }, [groupedImages, searchQuery]);
 
   // Default to first group if nothing selected or selection no longer in filtered results
-  const currentGroupName =
-    selectedGroupName && filteredGroups.has(selectedGroupName)
-      ? selectedGroupName
+  const currentGroupKey =
+    selectedGroupKey && filteredGroups.has(selectedGroupKey)
+      ? selectedGroupKey
       : (filteredGroups.keys().next().value ?? null);
-  const currentGroupImages = currentGroupName
-    ? (filteredGroups.get(currentGroupName) ?? [])
+  const currentGroupImages = currentGroupKey
+    ? (filteredGroups.get(currentGroupKey) ?? [])
     : [];
 
-  const handleSelectGroupName = (name: string) => {
-    setSelectedGroupName(name);
+  const handleSelectGroupKey = (key: string) => {
+    setSelectedGroupKey(key);
     setVariantIndex(0);
   };
 
@@ -134,17 +134,17 @@ export default function SnapshotsPage() {
         <Flex direction="row" gap="0" height="100%" width="100%">
           <SnapshotSidebarContent
             filteredGroups={filteredGroups}
-            currentGroupName={currentGroupName}
+            currentGroupKey={currentGroupKey}
             searchQuery={searchQuery}
             onSearchChange={setSearchQuery}
-            onSelectGroupName={handleSelectGroupName}
+            onSelectGroupKey={handleSelectGroupKey}
             hasNextPage={hasNextPage}
             isFetchingNextPage={isFetchingNextPage}
             fetchNextPage={fetchNextPage}
           />
           <Separator orientation="vertical" />
           <SnapshotMainContent
-            currentGroupName={currentGroupName}
+            currentGroupKey={currentGroupKey}
             currentGroupImages={currentGroupImages}
             variantIndex={variantIndex}
             onVariantChange={setVariantIndex}

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

@@ -4,6 +4,7 @@ import type {BuildDetailsVcsInfo} from './buildDetailsTypes';
 export interface SnapshotImage {
   display_name: string | null;
   image_file_name: string;
+  group: string | null;
   height: number;
   key: string;
   width: number;