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)}