diff --git a/static/app/views/issueDetails/groupDistributions/groupDistributionCrumbs.tsx b/static/app/views/issueDetails/groupDistributions/groupDistributionCrumbs.tsx
new file mode 100644
index 00000000000000..e528e1b99af162
--- /dev/null
+++ b/static/app/views/issueDetails/groupDistributions/groupDistributionCrumbs.tsx
@@ -0,0 +1,64 @@
+import type {Crumb} from 'sentry/components/breadcrumbs';
+import {ProjectAvatar} from 'sentry/components/core/avatar/projectAvatar';
+import {
+ CrumbContainer,
+ NavigationCrumbs,
+ ShortId,
+} from 'sentry/components/events/eventDrawer';
+import {t} from 'sentry/locale';
+import type {Group} from 'sentry/types/group';
+import type {Project} from 'sentry/types/project';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useParams} from 'sentry/utils/useParams';
+import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
+import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
+import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
+
+interface Props {
+ group: Group;
+ project: Project;
+ tab: DrawerTab;
+}
+
+export default function GroupDistributionCrumbs({group, project, tab}: Props) {
+ const location = useLocation();
+ const {tagKey} = useParams<{tagKey: string}>();
+
+ const {baseUrl} = useGroupDetailsRoute();
+ const crumbs: Crumb[] = [
+ {
+ label: (
+
+
+ {group.shortId}
+
+ ),
+ },
+ ];
+ if (tab === DrawerTab.TAGS) {
+ crumbs.push({
+ label: t('All Tags'),
+ to: tagKey
+ ? {
+ pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
+ query: {...location.query, tab: DrawerTab.TAGS},
+ }
+ : undefined,
+ });
+ } else if (tab === DrawerTab.FEATURE_FLAGS) {
+ crumbs.push({
+ label: t('All Feature Flags'),
+ to: tagKey
+ ? {
+ pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
+ query: {...location.query, tab: DrawerTab.FEATURE_FLAGS},
+ }
+ : undefined,
+ });
+ }
+ if (tagKey) {
+ crumbs.push({label: tagKey});
+ }
+
+ return ;
+}
diff --git a/static/app/views/issueDetails/groupDistributionsDrawer.tsx b/static/app/views/issueDetails/groupDistributionsDrawer.tsx
index 432baee932e2fb..8f1394c027ae46 100644
--- a/static/app/views/issueDetails/groupDistributionsDrawer.tsx
+++ b/static/app/views/issueDetails/groupDistributionsDrawer.tsx
@@ -2,27 +2,23 @@ import {useRef, useState} from 'react';
import styled from '@emotion/styled';
import AnalyticsArea from 'sentry/components/analyticsArea';
-import {ProjectAvatar} from 'sentry/components/core/avatar/projectAvatar';
import {ButtonBar} from 'sentry/components/core/button/buttonBar';
import {InputGroup} from 'sentry/components/core/input/inputGroup';
import {
- CrumbContainer,
EventDrawerBody,
EventDrawerContainer,
EventDrawerHeader,
EventNavigator,
- NavigationCrumbs,
SearchInput,
- ShortId,
} from 'sentry/components/events/eventDrawer';
import {IconSearch} from 'sentry/icons';
import {t, tct} from 'sentry/locale';
import type {Group} from 'sentry/types/group';
import {trackAnalytics} from 'sentry/utils/analytics';
-import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import {useParams} from 'sentry/utils/useParams';
import useProjects from 'sentry/utils/useProjects';
+import GroupDistributionCrumbs from 'sentry/views/issueDetails/groupDistributions/groupDistributionCrumbs';
import TagExportDropdown from 'sentry/views/issueDetails/groupDistributions/tagExportDropdown';
import TagFlagPicker from 'sentry/views/issueDetails/groupDistributions/tagFlagPicker';
import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
@@ -31,8 +27,6 @@ import {FlagDetailsDrawerContent} from 'sentry/views/issueDetails/groupFeatureFl
import FlagDrawerContent from 'sentry/views/issueDetails/groupFeatureFlags/flagDrawerContent';
import {TagDetailsDrawerContent} from 'sentry/views/issueDetails/groupTags/tagDetailsDrawerContent';
import TagDrawerContent from 'sentry/views/issueDetails/groupTags/tagDrawerContent';
-import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
-import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
import {useEnvironmentsFromUrl} from 'sentry/views/issueDetails/utils';
function getHeaderTitle(
@@ -69,7 +63,6 @@ function BaseGroupDistributionsDrawer({
group,
includeFeatureFlagsTab,
}: GroupDistributionsDrawerProps) {
- const location = useLocation();
const organization = useOrganization();
const environments = useEnvironmentsFromUrl();
// XXX: tagKey param is re-used for feature flag details drawer
@@ -78,8 +71,6 @@ function BaseGroupDistributionsDrawer({
const {projects} = useProjects();
const project = projects.find(p => p.slug === group.project.slug)!;
- const {baseUrl} = useGroupDetailsRoute();
-
const [search, setSearch] = useState('');
const {tab, setTab} = useDrawerTab({enabled: includeFeatureFlagsTab});
@@ -129,38 +120,7 @@ function BaseGroupDistributionsDrawer({
return (
-
-
- {group.shortId}
-
- ),
- },
- tab === DrawerTab.TAGS
- ? {
- label: t('All Tags'),
- to: tagKey
- ? {
- pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
- query: {...location.query, tab: DrawerTab.TAGS},
- }
- : undefined,
- }
- : {
- label: t('All Feature Flags'),
- to: tagKey
- ? {
- pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
- query: {...location.query, tab: DrawerTab.FEATURE_FLAGS},
- }
- : undefined,
- },
- ...(tagKey ? [{label: tagKey}] : []),
- ]}
- />
+
{getHeaderTitle(tagKey, tab, includeFeatureFlagsTab)}