feat(dynamic-groups): Move issue cluster details into drawer (#106028)

pulls the cluster details page into a drawer and adds a preview of the
issues in the drawer

<img width="1308" height="510" alt="image"
src="https://github.com/user-attachments/assets/9e1353e9-1d82-4c72-8767-12b1df4eae0a"
/>

Author: scttcper

static/app/router/routes.tsx

@@ -2649,10 +2649,6 @@ function buildRoutes(): RouteObject[] {
       path: 'dynamic-groups/',
       component: make(() => import('sentry/views/issueList/pages/dynamicGrouping')),
     },
-    {
-      path: 'top-issues/',
-      component: make(() => import('sentry/views/issueList/pages/topIssues')),
-    },
     {
       path: 'views/:viewId/',
       component: errorHandler(OverviewWrapper),

static/app/views/issueList/pages/dynamicGrouping.tsx

@@ -1,5 +1,6 @@
-import {Fragment, useCallback, useMemo, useRef, useState} from 'react';
+import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
+import * as qs from 'query-string';
 
 import {Container, Flex} from '@sentry/scraps/layout';
 import {Heading, Text} from '@sentry/scraps/text';
@@ -9,7 +10,6 @@ import {openConfirmModal} from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {Checkbox} from 'sentry/components/core/checkbox';
-import {InlineCode} from 'sentry/components/core/code/inlineCode';
 import {Disclosure} from 'sentry/components/core/disclosure';
 import {Link} from 'sentry/components/core/link';
 import {TextArea} from 'sentry/components/core/textarea';
@@ -18,6 +18,7 @@ import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import EventOrGroupTitle from 'sentry/components/eventOrGroupTitle';
 import EventMessage from 'sentry/components/events/eventMessage';
 import FeedbackButton from 'sentry/components/feedbackButton/feedbackButton';
+import useDrawer from 'sentry/components/globalDrawer';
 import TimesTag from 'sentry/components/group/inboxBadges/timesTag';
 import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
@@ -50,46 +51,26 @@ import type {Group} from 'sentry/types/group';
 import {GroupStatus, GroupSubstatus} from 'sentry/types/group';
 import {getMessage, getTitle} from 'sentry/utils/events';
 import {useApiQuery} from 'sentry/utils/queryClient';
+import {decodeInteger} from 'sentry/utils/queryString';
 import useApi from 'sentry/utils/useApi';
 import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
+import {
+  ClusterDetailDrawer,
+  renderWithInlineCode,
+  useClusterStats,
+  type ClusterSummary,
+} from 'sentry/views/issueList/pages/topIssuesDrawer';
 import {openSeerExplorer} from 'sentry/views/seerExplorer/openSeerExplorer';
 
 const CLUSTERS_PER_PAGE = 20;
 
-interface AssignedEntity {
-  email: string | null;
-  id: string;
-  name: string;
-  type: string;
-}
-
-interface ClusterSummary {
-  assignedTo: AssignedEntity[];
-  cluster_avg_similarity: number | null;
-  cluster_id: number;
-  cluster_min_similarity: number | null;
-  cluster_size: number | null;
-  description: string;
-  fixability_score: number | null;
-  group_ids: number[];
-  issue_titles: string[];
-  project_ids: number[];
-  summary: string | null;
-  tags: string[];
-  title: string;
-  code_area_tags?: string[];
-  error_type?: string;
-  error_type_tags?: string[];
-  impact?: string;
-  location?: string;
-  service_tags?: string[];
-}
-
 function formatClusterInfoForClipboard(cluster: ClusterSummary): string {
   const lines: string[] = [];
 
@@ -113,19 +94,6 @@ function formatClusterPromptForSeer(cluster: ClusterSummary): string {
   return `I'd like to investigate this cluster of issues:\n\n${message}\n\nPlease help me understand the root cause and potential fixes for these related issues.`;
 }
 
-function renderWithInlineCode(text: string): React.ReactNode {
-  const parts = text.split(/(`[^`]+`)/g);
-  if (parts.length === 1) {
-    return text;
-  }
-  return parts.map((part, index) => {
-    if (part.startsWith('`') && part.endsWith('`')) {
-      return <InlineCode key={index}>{part.slice(1, -1)}</InlineCode>;
-    }
-    return part;
-  });
-}
-
 interface TopIssuesResponse {
   data: ClusterSummary[];
   last_updated?: string;
@@ -179,127 +147,6 @@ function CompactIssuePreview({group}: {group: Group}) {
   );
 }
 
-interface ClusterStats {
-  firstSeen: string | null;
-  hasRegressedIssues: boolean;
-  isEscalating: boolean;
-  isPending: boolean;
-  lastSeen: string | null;
-  newIssuesCount: number;
-  totalEvents: number;
-  totalUsers: number;
-}
-
-function useClusterStats(groupIds: number[]): ClusterStats {
-  const organization = useOrganization();
-
-  const {data: groups, isPending} = useApiQuery<Group[]>(
-    [
-      `/organizations/${organization.slug}/issues/`,
-      {
-        query: {
-          group: groupIds,
-          query: `issue.id:[${groupIds.join(',')}]`,
-        },
-      },
-    ],
-    {
-      staleTime: 60000,
-      enabled: groupIds.length > 0,
-    }
-  );
-
-  return useMemo(() => {
-    if (isPending || !groups || groups.length === 0) {
-      return {
-        totalEvents: 0,
-        totalUsers: 0,
-        firstSeen: null,
-        lastSeen: null,
-        newIssuesCount: 0,
-        hasRegressedIssues: false,
-        isEscalating: false,
-        isPending,
-      };
-    }
-
-    let totalEvents = 0;
-    let totalUsers = 0;
-    let earliestFirstSeen: Date | null = null;
-    let latestLastSeen: Date | null = null;
-
-    // Calculate new issues (first seen within last week)
-    const oneWeekAgo = new Date();
-    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
-    let newIssuesCount = 0;
-
-    // Check for regressed issues
-    let hasRegressedIssues = false;
-
-    // Calculate escalation by summing event stats across all issues
-    // We'll compare the first half of the 24h stats to the second half
-    let firstHalfEvents = 0;
-    let secondHalfEvents = 0;
-
-    for (const group of groups) {
-      totalEvents += parseInt(group.count, 10) || 0;
-      totalUsers += group.userCount || 0;
-
-      if (group.firstSeen) {
-        const firstSeenDate = new Date(group.firstSeen);
-        if (!earliestFirstSeen || firstSeenDate < earliestFirstSeen) {
-          earliestFirstSeen = firstSeenDate;
-        }
-        // Check if this issue is new (first seen within last week)
-        if (firstSeenDate >= oneWeekAgo) {
-          newIssuesCount++;
-        }
-      }
-
-      if (group.lastSeen) {
-        const lastSeenDate = new Date(group.lastSeen);
-        if (!latestLastSeen || lastSeenDate > latestLastSeen) {
-          latestLastSeen = lastSeenDate;
-        }
-      }
-
-      // Check for regressed substatus
-      if (group.substatus === GroupSubstatus.REGRESSED) {
-        hasRegressedIssues = true;
-      }
-
-      // Aggregate 24h stats for escalation detection
-      const stats24h = group.stats?.['24h'];
-      if (stats24h && stats24h.length > 0) {
-        const midpoint = Math.floor(stats24h.length / 2);
-        for (let i = 0; i < stats24h.length; i++) {
-          const eventCount = stats24h[i]?.[1] ?? 0;
-          if (i < midpoint) {
-            firstHalfEvents += eventCount;
-          } else {
-            secondHalfEvents += eventCount;
-          }
-        }
-      }
-    }
-
-    // Determine if escalating: second half has >1.5x events compared to first half
-    // Only consider escalating if there were events in the first half (avoid division by zero)
-    const isEscalating = firstHalfEvents > 0 && secondHalfEvents > firstHalfEvents * 1.5;
-
-    return {
-      totalEvents,
-      totalUsers,
-      firstSeen: earliestFirstSeen?.toISOString() ?? null,
-      lastSeen: latestLastSeen?.toISOString() ?? null,
-      newIssuesCount,
-      hasRegressedIssues,
-      isEscalating,
-      isPending,
-    };
-  }, [groups, isPending]);
-}
-
 function ClusterIssues({groupIds}: {groupIds: number[]}) {
   const organization = useOrganization();
   const previewGroupIds = groupIds.slice(0, 3);
@@ -352,6 +199,7 @@ function ClusterCard({
 }: ClusterCardProps) {
   const api = useApi();
   const organization = useOrganization();
+  const location = useLocation();
   const {selection} = usePageFilters();
   const [activeTab, setActiveTab] = useState<'summary' | 'root-cause' | 'issues'>(
     'summary'
@@ -480,7 +328,10 @@ function ClusterCard({
       <CardHeader>
         {cluster.impact && (
           <ClusterTitleLink
-            to={`/organizations/${organization.slug}/issues/top-issues/?cluster=${cluster.cluster_id}`}
+            to={{
+              pathname: location.pathname,
+              query: {...location.query, cluster: String(cluster.cluster_id)},
+            }}
           >
             {cluster.impact}
             <Text
@@ -751,6 +602,9 @@ function ClusterCard({
 
 function DynamicGrouping() {
   const organization = useOrganization();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const {openDrawer, isDrawerOpen} = useDrawer();
   const user = useUser();
   const {teams: userTeams} = useUserTeams();
   const {selection} = usePageFilters();
@@ -809,20 +663,47 @@ function DynamicGrouping() {
   };
 
   const isUsingCustomData = customClusterData !== null;
+  const clusterData = useMemo(
+    () => customClusterData ?? topIssuesResponse?.data ?? [],
+    [customClusterData, topIssuesResponse?.data]
+  );
+
+  const selectedClusterId = decodeInteger(location.query.cluster);
+  useEffect(() => {
+    const selectedCluster = clusterData.find(
+      cluster => cluster.cluster_id === selectedClusterId
+    );
+    if (selectedClusterId === undefined || !selectedCluster) {
+      return;
+    }
+
+    openDrawer(() => <ClusterDetailDrawer cluster={selectedCluster} />, {
+      ariaLabel: t('Top issue details'),
+      drawerKey: 'top-issues-cluster-drawer',
+      onClose: () => {
+        navigate(
+          {
+            query: {...qs.parse(window.location.search), cluster: undefined},
+          },
+          {replace: true, preventScrollReset: true}
+        );
+      },
+      shouldCloseOnLocationChange: nextLocation => !nextLocation.query.cluster,
+    });
+  }, [clusterData, openDrawer, navigate, isDrawerOpen, selectedClusterId]);
 
   // Extract all unique teams from the cluster data (for dev tools filter UI)
   const teamsInData = useMemo(() => {
-    const data = topIssuesResponse?.data ?? [];
     const teamMap = new Map<string, {id: string; name: string}>();
-    for (const cluster of data) {
+    for (const cluster of clusterData) {
       for (const entity of cluster.assignedTo ?? []) {
         if (entity.type === 'team' && !teamMap.has(entity.id)) {
           teamMap.set(entity.id, {id: entity.id, name: entity.name});
         }
       }
     }
     return Array.from(teamMap.values()).sort((a, b) => a.name.localeCompare(b.name));
-  }, [topIssuesResponse?.data]);
+  }, [clusterData]);
 
   const isTeamFilterActive = selectedTeamIds.size > 0;
 
@@ -844,8 +725,6 @@ function DynamicGrouping() {
   };
 
   const filteredAndSortedClusters = useMemo(() => {
-    const clusterData = customClusterData ?? topIssuesResponse?.data ?? [];
-
     if (isUsingCustomData && disableFilters) {
       return clusterData;
     }
@@ -900,8 +779,7 @@ function DynamicGrouping() {
 
     return result.sort((a, b) => (b.fixability_score ?? 0) - (a.fixability_score ?? 0));
   }, [
-    customClusterData,
-    topIssuesResponse?.data,
+    clusterData,
     isUsingCustomData,
     disableFilters,
     selection.projects,
@@ -960,9 +838,6 @@ function DynamicGrouping() {
                 </CustomDataBadge>
               )}
             </Flex>
-            <Link to={`/organizations/${organization.slug}/issues/top-issues/`}>
-              <Button size="sm">{t('View Single Card Layout')}</Button>
-            </Link>
           </Flex>
 
           <Flex gap="sm" align="center" style={{marginBottom: space(2)}}>
@@ -979,7 +854,7 @@ function DynamicGrouping() {
             <FeedbackButton
               size="sm"
               feedbackOptions={{
-                messagePlaceholder: t('What do you think about the new Top Issues page?'),
+                messagePlaceholder: t('What do you think about the Top Issues drawer?'),
                 tags: {
                   ['feedback.source']: 'top-issues',
                   ['feedback.owner']: 'issues',