ref(tags/flags): change issue tags route to /distributions/ (#88062)

aliu39 · andrewshie-sentry · commit 5d898de13bc7 · 2025-03-31T14:07:37.000-07:00
Now that feature flags are included in the tags drawer of streamlined
UI, we're deciding to change the route path to /distributions/. Since
the new/old views share routes, this will have to be done for the old UI
too (tags tab). Also adds redirects from the previous /tags/ and
/tags/:tagKey route.

Implementation: renames the `Tab.TAGS` enum to `Tab.DISTRIBUTIONS` and
updates the `TabPaths` entry. I've added a comment explaining this tab
is renamed from tags. "tags" is not in the name because all the other
paths = enum name, and "tags-and-flags-distributions/", for example,
seems too long for a URL.
diff --git a/fixtures/page_objects/issue_details.py b/fixtures/page_objects/issue_details.py
@@ -25,7 +25,7 @@ def visit_issue_in_environment(self, org, groupid, environment):
         self.browser.wait_until(".group-detail")
 
     def visit_tag_values(self, org, groupid, tag):
-        self.browser.get(f"/organizations/{org}/issues/{groupid}/tags/{tag}/")
+        self.browser.get(f"/organizations/{org}/issues/{groupid}/distributions/{tag}/")
         self.browser.wait_until('[data-test-id="group-tag-value"]')
 
     def get_environment(self):
diff --git a/static/app/components/events/eventTags/eventTagsTreeRow.tsx b/static/app/components/events/eventTags/eventTagsTreeRow.tsx
@@ -24,6 +24,7 @@ import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
 import {useLocation} from 'sentry/utils/useLocation';
 import useMutateProject from 'sentry/utils/useMutateProject';
 import useOrganization from 'sentry/utils/useOrganization';
+import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {traceAnalytics} from 'sentry/views/performance/newTraceDetails/traceAnalytics';
 import {
   getSearchInExploreTarget,
@@ -163,7 +164,7 @@ function EventTagsTreeRowDropdown({
             key: 'tag-details',
             label: t('Tag breakdown'),
             to: {
-              pathname: `/organizations/${organization.slug}/issues/${event.groupID}/tags/${encodeURIComponent(originalTag.key)}/`,
+              pathname: `/organizations/${organization.slug}/issues/${event.groupID}/${TabPaths[Tab.DISTRIBUTIONS]}${encodeURIComponent(originalTag.key)}/`,
               query: location.query,
             },
           },
diff --git a/static/app/routes.tsx b/static/app/routes.tsx
@@ -2068,11 +2068,11 @@ function buildRoutes() {
         component={make(() => import('sentry/views/issueDetails/groupCheckIns'))}
       />
       <Route
-        path={TabPaths[Tab.TAGS]}
+        path={TabPaths[Tab.DISTRIBUTIONS]}
         component={make(() => import('sentry/views/issueDetails/groupTags/groupTagsTab'))}
       />
       <Route
-        path={`${TabPaths[Tab.TAGS]}:tagKey/`}
+        path={`${TabPaths[Tab.DISTRIBUTIONS]}:tagKey/`}
         component={make(() => import('sentry/views/issueDetails/groupTagValues'))}
       />
       <Route
@@ -2110,6 +2110,25 @@ function buildRoutes() {
       />
       <Route path="views/:viewId/" component={errorHandler(OverviewWrapper)} />
       <Route path="searches/:searchId/" component={errorHandler(OverviewWrapper)} />
+
+      {/* Redirects for legacy tags route. */}
+      <Redirect
+        from=":groupId/tags/"
+        to={`/issues/:groupId/${TabPaths[Tab.DISTRIBUTIONS]}`}
+      />
+      <Redirect
+        from=":groupId/tags/:tagKey/"
+        to={`/issues/:groupId/${TabPaths[Tab.DISTRIBUTIONS]}:tagKey/`}
+      />
+      <Redirect
+        from={`:groupId/${TabPaths[Tab.EVENTS]}:eventId/tags/`}
+        to={`/issues/:groupId/${TabPaths[Tab.EVENTS]}:eventId/${TabPaths[Tab.DISTRIBUTIONS]}`}
+      />
+      <Redirect
+        from={`:groupId/${TabPaths[Tab.EVENTS]}:eventId/tags/:tagKey/`}
+        to={`/issues/:groupId/${TabPaths[Tab.EVENTS]}:eventId/${TabPaths[Tab.DISTRIBUTIONS]}:tagKey/`}
+      />
+
       <Route
         path=":groupId/"
         component={make(() => import('sentry/views/issueDetails/groupDetails'))}
diff --git a/static/app/views/issueDetails/groupDetails.tsx b/static/app/views/issueDetails/groupDetails.tsx
@@ -665,7 +665,7 @@ function GroupDetailsContent({
       return;
     }
 
-    if (currentTab === Tab.TAGS) {
+    if (currentTab === Tab.DISTRIBUTIONS) {
       openTagsDrawer();
     } else if (currentTab === Tab.SIMILAR_ISSUES) {
       openSimilarIssuesDrawer();
@@ -688,7 +688,7 @@ function GroupDetailsContent({
 
   const isDisplayingEventDetails = [
     Tab.DETAILS,
-    Tab.TAGS,
+    Tab.DISTRIBUTIONS,
     Tab.SIMILAR_ISSUES,
     Tab.MERGED,
     Tab.ACTIVITY,
diff --git a/static/app/views/issueDetails/groupFeatureFlags/flagDetailsDrawerContent.tsx b/static/app/views/issueDetails/groupFeatureFlags/flagDetailsDrawerContent.tsx
@@ -76,7 +76,7 @@ export function FlagDetailsDrawerContent() {
         <LinkButton
           size="sm"
           to={{
-            pathname: `${baseUrl}${TabPaths[Tab.TAGS]}`,
+            pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
             query: {...location.query, tab: DrawerTab.FEATURE_FLAGS},
           }}
         >
diff --git a/static/app/views/issueDetails/groupTagValues.tsx b/static/app/views/issueDetails/groupTagValues.tsx
@@ -33,6 +33,7 @@ import {useParams} from 'sentry/utils/useParams';
 import useProjectFromSlug from 'sentry/utils/useProjectFromSlug';
 import {hasDatasetSelector} from 'sentry/views/dashboards/utils';
 import GroupEventDetails from 'sentry/views/issueDetails/groupEventDetails/groupEventDetails';
+import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroup} from 'sentry/views/issueDetails/useGroup';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 import {
@@ -297,7 +298,7 @@ export function GroupTagValues() {
             <LinkButton
               size="sm"
               priority="default"
-              href={`/${orgId}/${group.project.slug}/issues/${group.id}/tags/${tagKey}/export/`}
+              href={`/${orgId}/${group.project.slug}/issues/${group.id}/${TabPaths[Tab.DISTRIBUTIONS]}${tagKey}/export/`}
             >
               {t('Export Page to CSV')}
             </LinkButton>
diff --git a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx
@@ -123,7 +123,7 @@ export function GroupTagsDrawer({
           // TODO(issues): Dropdown menu doesn't support hrefs yet
           onAction: () => {
             window.open(
-              `/${organization.slug}/${project.slug}/issues/${group.id}/tags/${tagKey}/export/`,
+              `/${organization.slug}/${project.slug}/issues/${group.id}/${TabPaths[Tab.DISTRIBUTIONS]}${tagKey}/export/`,
               '_blank'
             );
           },
@@ -200,7 +200,7 @@ export function GroupTagsDrawer({
                   label: t('All Tags'),
                   to: tagKey
                     ? {
-                        pathname: `${baseUrl}${TabPaths[Tab.TAGS]}`,
+                        pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
                         query: {...location.query, tab: DrawerTab.TAGS},
                       }
                     : undefined,
@@ -209,7 +209,7 @@ export function GroupTagsDrawer({
                   label: t('All Feature Flags'),
                   to: tagKey
                     ? {
-                        pathname: `${baseUrl}${TabPaths[Tab.TAGS]}`,
+                        pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
                         query: {...location.query, tab: DrawerTab.FEATURE_FLAGS},
                       }
                     : undefined,
diff --git a/static/app/views/issueDetails/groupTags/groupTagsTab.tsx b/static/app/views/issueDetails/groupTags/groupTagsTab.tsx
@@ -21,6 +21,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useParams} from 'sentry/utils/useParams';
 import GroupEventDetails from 'sentry/views/issueDetails/groupEventDetails/groupEventDetails';
 import {useGroupTags} from 'sentry/views/issueDetails/groupTags/useGroupTags';
+import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroup} from 'sentry/views/issueDetails/useGroup';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 import {
@@ -75,7 +76,7 @@ export function GroupTagsTab() {
 
   const getTagKeyTarget = (tag: SimpleTag) => {
     return {
-      pathname: `${baseUrl}tags/${tag.key}/`,
+      pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}/${tag.key}/`,
       query: extractSelectionParameters(location.query),
     };
   };
diff --git a/static/app/views/issueDetails/groupTags/useGroupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/useGroupTagsDrawer.tsx
@@ -6,6 +6,7 @@ import type {Group} from 'sentry/types/group';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {GroupTagsDrawer} from 'sentry/views/issueDetails/groupTags/groupTagsDrawer';
+import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 
 export function useGroupTagsDrawer({
@@ -42,7 +43,7 @@ export function useGroupTagsDrawer({
           );
         },
         shouldCloseOnLocationChange: newLocation => {
-          return !newLocation.pathname.includes('/tags/');
+          return !newLocation.pathname.includes(`/${TabPaths[Tab.DISTRIBUTIONS]}`);
         },
       }
     );
diff --git a/static/app/views/issueDetails/header.spec.tsx b/static/app/views/issueDetails/header.spec.tsx
@@ -87,7 +87,7 @@ describe('GroupHeader', () => {
 
       await userEvent.click(screen.getByRole('tab', {name: /tags/i}));
       expect(router.push).toHaveBeenCalledWith({
-        pathname: 'BASE_URL/tags/',
+        pathname: 'BASE_URL/distributions/',
         query: {},
       });
 
@@ -206,7 +206,7 @@ describe('GroupHeader', () => {
 
       await userEvent.click(screen.getByRole('tab', {name: /tags/i}));
       expect(router.push).toHaveBeenCalledWith({
-        pathname: 'BASE_URL/tags/',
+        pathname: 'BASE_URL/distributions/',
         query: {},
       });
 
diff --git a/static/app/views/issueDetails/header.tsx b/static/app/views/issueDetails/header.tsx
@@ -130,10 +130,10 @@ export function GroupHeaderTabs({
         {t('Attachments')}
       </TabList.Item>
       <TabList.Item
-        key={Tab.TAGS}
+        key={Tab.DISTRIBUTIONS}
         hidden={!issueTypeConfig.pages.tagsTab.enabled}
-        disabled={disabledTabs.includes(Tab.TAGS)}
-        to={{pathname: `${baseUrl}tags/`, query: queryParams}}
+        disabled={disabledTabs.includes(Tab.DISTRIBUTIONS)}
+        to={{pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`, query: queryParams}}
       >
         {t('Tags')}
       </TabList.Item>
@@ -274,7 +274,7 @@ function GroupHeader({baseUrl, group, organization, event, project}: Props) {
                   ) : (
                     <Link
                       disabled={disableActions}
-                      to={`${baseUrl}tags/user/${location.search}`}
+                      to={`${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}user/${location.search}`}
                     >
                       <Count className="count" value={userCount} />
                     </Link>
diff --git a/static/app/views/issueDetails/streamline/header/header.tsx b/static/app/views/issueDetails/streamline/header/header.tsx
@@ -40,6 +40,7 @@ import {AttachmentsBadge} from 'sentry/views/issueDetails/streamline/header/atta
 import {IssueIdBreadcrumb} from 'sentry/views/issueDetails/streamline/header/issueIdBreadcrumb';
 import {ReplayBadge} from 'sentry/views/issueDetails/streamline/header/replayBadge';
 import {UserFeedbackBadge} from 'sentry/views/issueDetails/streamline/header/userFeedbackBadge';
+import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 import {ReprocessingStatus} from 'sentry/views/issueDetails/utils';
 
@@ -139,7 +140,7 @@ export default function StreamlinedGroupHeader({
                 t('Users')
               ) : (
                 <StatLink
-                  to={`${baseUrl}tags/user/${location.search}`}
+                  to={`${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}user/${location.search}`}
                   aria-label={t('View affected users')}
                 >
                   {t('Users')}
diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx
@@ -138,7 +138,7 @@ function TagPreviewProgressBar({tag, groupId}: {groupId: string; tag: GroupTag})
     <Tooltip title={tooltipContent} skipWrapper maxWidth={420}>
       <TagPreviewGrid
         to={{
-          pathname: `${baseUrl}${TabPaths[Tab.TAGS]}${tag.key}/`,
+          pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}${tag.key}/`,
           query: location.query,
         }}
         onMouseEnter={() => {
@@ -181,7 +181,7 @@ function IssueTagButton({
         aria-label={t('View issue tag distributions')}
         size="xs"
         to={{
-          pathname: `${baseUrl}${TabPaths[Tab.TAGS]}`,
+          pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
           query: location.query,
         }}
         replace
@@ -195,7 +195,7 @@ function IssueTagButton({
   return (
     <IssueTagsLink
       to={{
-        pathname: `${baseUrl}${TabPaths[Tab.TAGS]}`,
+        pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
         query: location.query,
       }}
       onClick={() => {
diff --git a/static/app/views/issueDetails/types.tsx b/static/app/views/issueDetails/types.tsx
@@ -3,7 +3,7 @@ export enum Tab {
   ACTIVITY = 'activity',
   USER_FEEDBACK = 'user-feedback',
   ATTACHMENTS = 'attachments',
-  TAGS = 'tags',
+  DISTRIBUTIONS = 'distributions', // Renamed from TAGS so the route may include feature flags.
   EVENTS = 'events',
   MERGED = 'merged',
   SIMILAR_ISSUES = 'similar-issues',
@@ -18,7 +18,7 @@ export const TabPaths: Record<Tab, string> = {
   [Tab.ACTIVITY]: 'activity/',
   [Tab.USER_FEEDBACK]: 'feedback/',
   [Tab.ATTACHMENTS]: 'attachments/',
-  [Tab.TAGS]: 'tags/',
+  [Tab.DISTRIBUTIONS]: 'distributions/',
   [Tab.EVENTS]: 'events/',
   [Tab.MERGED]: 'merged/',
   [Tab.SIMILAR_ISSUES]: 'similar/',
diff --git a/static/app/views/issueDetails/useGroupDetailsRoute.tsx b/static/app/views/issueDetails/useGroupDetailsRoute.tsx
@@ -11,9 +11,9 @@ type RouteProps = RouteComponentProps<{groupId: string; eventId?: string}>;
 function getCurrentTab({router}: {router: RouteProps['router']}) {
   const currentRoute = router.routes[router.routes.length - 1];
 
-  // If we're in the tag details page ("/tags/:tagKey/")
+  // If we're in the tag details page ("/distributions/:tagKey/")
   if (router.params.tagKey) {
-    return Tab.TAGS;
+    return Tab.DISTRIBUTIONS;
   }
   return (
     Object.values(Tab).find(tab => currentRoute?.path === TabPaths[tab]) ?? Tab.DETAILS
diff --git a/static/app/views/issueDetails/useIssueDetailsHeader.tsx b/static/app/views/issueDetails/useIssueDetailsHeader.tsx
@@ -36,7 +36,7 @@ export function useIssueDetailsHeader({
         Tab.EVENTS,
         Tab.MERGED,
         Tab.SIMILAR_ISSUES,
-        Tab.TAGS,
+        Tab.DISTRIBUTIONS,
       ];
     }
 
@@ -47,7 +47,7 @@ export function useIssueDetailsHeader({
         Tab.EVENTS,
         Tab.MERGED,
         Tab.SIMILAR_ISSUES,
-        Tab.TAGS,
+        Tab.DISTRIBUTIONS,
         Tab.USER_FEEDBACK,
       ];
     }

Original file line number	Diff line number	Diff line change
`@@ -76,7 +76,7 @@ export function FlagDetailsDrawerContent() {`
`76`	`76`	`<LinkButton`
`77`	`77`	`size="sm"`
`78`	`78`	`to={{`
`79`		- pathname: `${baseUrl}${TabPaths[Tab.TAGS]}`,
	`79`	+ pathname: `${baseUrl}${TabPaths[Tab.DISTRIBUTIONS]}`,
`80`	`80`	`query: {...location.query, tab: DrawerTab.FEATURE_FLAGS},`
`81`	`81`	`}}`
`82`	`82`	`>`