chore(preprod): make build details and build compare breadcrumb consistent (EME-657, EME-659)

static/app/views/preprod/buildComparison/header/buildCompareHeaderContent.tsx

@@ -12,7 +12,7 @@ import {Breadcrumbs, type Crumb} from 'sentry/components/breadcrumbs';
 import FeedbackButton from 'sentry/components/feedbackButton/feedbackButton';
 import {IconCode, IconDownload, IconJson, IconMobile} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import useOrganization from 'sentry/utils/useOrganization';
+import ProjectsStore from 'sentry/stores/projectsStore';
 import {
   isSizeInfoCompleted,
   type BuildDetailsApiResponse,
@@ -24,6 +24,7 @@ import {
   getPlatformIconFromPlatform,
   getReadablePlatformLabel,
 } from 'sentry/views/preprod/utils/labelUtils';
+import {makeReleasesUrl} from 'sentry/views/preprod/utils/releasesUrl';
 
 interface BuildCompareHeaderContentProps {
   buildDetails: BuildDetailsApiResponse;
@@ -32,23 +33,32 @@ interface BuildCompareHeaderContentProps {
 
 export function BuildCompareHeaderContent(props: BuildCompareHeaderContentProps) {
   const {buildDetails, projectId} = props;
-  const organization = useOrganization();
   const theme = useTheme();
+  const project = ProjectsStore.getBySlug(projectId);
   const labels = getLabels(buildDetails.app_info?.platform ?? undefined);
   const breadcrumbs: Crumb[] = [
     {
-      to: '#',
+      to: makeReleasesUrl(project?.id, {
+        appId: buildDetails.app_info.app_id ?? undefined,
+      }),
       label: t('Releases'),
     },
-    {
-      to: `/organizations/${organization.slug}/preprod/${projectId}/${buildDetails.id}/`,
-      label: buildDetails.app_info.version ?? t('Build Version'),
-    },
-    {
-      label: t('Compare'),
-    },
   ];
 
+  if (buildDetails.app_info.version) {
+    breadcrumbs.push({
+      to: makeReleasesUrl(project?.id, {
+        version: buildDetails.app_info.version,
+        appId: buildDetails.app_info.app_id ?? undefined,
+      }),
+      label: buildDetails.app_info.version,
+    });
+  }
+
+  breadcrumbs.push({
+    label: t('Compare'),
+  });
+
   return (
     <Flex justify="between" align="center" gap="lg">
       <Stack gap="lg" style={{padding: `0 0 ${theme.space.lg} 0`}}>

static/app/views/preprod/buildDetails/header/buildDetailsHeaderContent.tsx

@@ -29,35 +29,10 @@ import type RequestError from 'sentry/utils/requestError/requestError';
 import {useIsSentryEmployee} from 'sentry/utils/useIsSentryEmployee';
 import useOrganization from 'sentry/utils/useOrganization';
 import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
+import {makeReleasesUrl} from 'sentry/views/preprod/utils/releasesUrl';
 
 import {useBuildDetailsActions} from './useBuildDetailsActions';
 
-function makeReleasesUrl(
-  projectId: string | undefined,
-  query: {appId?: string; version?: string}
-): string {
-  const {appId, version} = query;
-
-  // Not knowing the projectId should be transient.
-  if (projectId === undefined) {
-    return '#';
-  }
-
-  const params = new URLSearchParams();
-  params.set('project', projectId);
-  const parts = [];
-  if (appId) {
-    parts.push(`release.package:${appId}`);
-  }
-  if (version) {
-    parts.push(`release.version:${version}`);
-  }
-  if (parts.length) {
-    params.set('query', parts.join(' '));
-  }
-  return `/explore/releases/?${params}`;
-}
-
 interface BuildDetailsHeaderContentProps {
   artifactId: string;
   buildDetailsQuery: UseApiQueryResult<BuildDetailsApiResponse, RequestError>;
@@ -108,7 +83,7 @@ export function BuildDetailsHeaderContent(props: BuildDetailsHeaderContentProps)
   const breadcrumbs: Crumb[] = [
     {
       to: makeReleasesUrl(project?.id, {
-        version: buildDetailsData.app_info.version ?? undefined,
+        appId: buildDetailsData.app_info.app_id ?? undefined,
       }),
       label: 'Releases',
     },

static/app/views/preprod/utils/releasesUrl.ts

@@ -0,0 +1,25 @@
+export function makeReleasesUrl(
+  projectId: string | undefined,
+  query: {appId?: string; version?: string}
+): string {
+  const {appId, version} = query;
+
+  // Not knowing the projectId should be transient.
+  if (projectId === undefined) {
+    return '#';
+  }
+
+  const params = new URLSearchParams();
+  params.set('project', projectId);
+  const parts = [];
+  if (appId) {
+    parts.push(`release.package:${appId}`);
+  }
+  if (version) {
+    parts.push(`release.version:${version}`);
+  }
+  if (parts.length) {
+    params.set('query', parts.join(' '));
+  }
+  return `/explore/releases/?${params}`;
+}