feat(ui): Releases preserve global selection header (#18357)

src/sentry/static/sentry/app/components/breadcrumbs.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import space from 'app/styles/space';
 import {IconChevron} from 'app/icons';
 import Link from 'app/components/links/link';
+import GlobalSelectionLink from 'app/components/globalSelectionLink';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import {Theme} from 'app/utils/theme';
 
@@ -18,6 +19,12 @@ export type Crumb = {
    */
   to?: React.ComponentProps<typeof Link>['to'] | null;
 
+  /**
+   * It will keep the global selection values (projects, environments, time) in the
+   * querystring when navigating (GlobalSelectionLink)
+   */
+  preserveGlobalSelection?: boolean;
+
   /**
    * Component will try to come up with unique key, but you can provide your own
    * (used when mapping over crumbs)
@@ -54,14 +61,16 @@ const Breadcrumbs = ({crumbs, linkLastItem = false}: Props) => {
 
   return (
     <BreadcrumbList>
-      {crumbs.map(({label, to, key}, index) => {
+      {crumbs.map(({label, to, preserveGlobalSelection, key}, index) => {
         const mapKey =
           key ?? typeof to === 'string' ? `${label}${to}` : `${label}${index}`;
 
         return (
           <React.Fragment key={mapKey}>
             {to ? (
-              <BreadcrumbLink to={to}>{label}</BreadcrumbLink>
+              <BreadcrumbLink to={to} preserveGlobalSelection={preserveGlobalSelection}>
+                {label}
+              </BreadcrumbLink>
             ) : (
               <BreadcrumbItem>{label}</BreadcrumbItem>
             )}
@@ -92,7 +101,9 @@ const BreadcrumbList = styled('div')`
   padding: ${space(1)} 0;
 `;
 
-const BreadcrumbLink = styled(Link)`
+const BreadcrumbLink = styled(({preserveGlobalSelection, ...props}) =>
+  preserveGlobalSelection ? <GlobalSelectionLink {...props} /> : <Link {...props} />
+)`
   ${getBreadcrumbListItemStyles}
 
   &:hover,

src/sentry/static/sentry/app/components/version.tsx

@@ -69,14 +69,12 @@ const Version = ({
   const versionToDisplay = formatVersion(version, withPackage);
 
   let releaseDetailProjectId: null | undefined | string | string[];
-  if (!preserveGlobalSelection) {
-    if (projectId) {
-      // if user specifically sets projectId and not preserveGlobalSelection, use that
-      releaseDetailProjectId = projectId;
-    } else if (!new Set(organization?.features).has('global-views')) {
-      // we need this for users without global-views, otherwise they might get `This release may not be in your selected project`
-      releaseDetailProjectId = location?.query.project;
-    }
+  if (projectId) {
+    // we can override preserveGlobalSelection's project id
+    releaseDetailProjectId = projectId;
+  } else if (!organization?.features.includes('global-views')) {
+    // we need this for users without global-views, otherwise they might get `This release may not be in your selected project`
+    releaseDetailProjectId = location?.query.project;
   }
 
   const renderVersion = () => {

src/sentry/static/sentry/app/views/releasesV2/detail/overview/chart/utils.tsx

@@ -33,7 +33,7 @@ export function getReleaseEventView(
     query: `release:${version} !event.type:transaction`,
     orderby: '-last_seen',
     range: period,
-    environments,
+    environment: environments,
     projects,
     start: start ? getUtcDateString(start) : undefined,
     end: end ? getUtcDateString(end) : undefined,

src/sentry/static/sentry/app/views/releasesV2/detail/overview/issues.tsx

@@ -60,7 +60,7 @@ class Issues extends React.Component<Props, State> {
       query: `release:${version} !event.type:transaction`,
       orderby: '-last_seen',
       range: period,
-      environments,
+      environment: environments,
       projects,
       start: start ? getUtcDateString(start) : undefined,
       end: end ? getUtcDateString(end) : undefined,

src/sentry/static/sentry/app/views/releasesV2/detail/releaseHeader.tsx

@@ -50,6 +50,7 @@ const ReleaseHeader = ({location, orgId, release, deploys, project}: Props) => {
             {
               to: `/organizations/${orgId}/releases/`,
               label: t('Releases'),
+              preserveGlobalSelection: true,
             },
             {label: formatVersion(version)},
           ]}

src/sentry/static/sentry/app/views/releasesV2/list/releaseCard.tsx

@@ -57,8 +57,7 @@ const ReleaseCard = ({release, project, location, reloading}: Props) => (
             <VersionWrapper>
               <Version
                 version={release.version}
-                // TODO(releasesV2): we don't use this for now
-                // preserveGlobalSelection
+                preserveGlobalSelection
                 tooltipRawVersion
                 truncate
                 projectId={String(project.id)}