ref(issue-details): Move Issues tabs to data sections

static/app/views/issueDetails/groupMerged/index.spec.tsx

@@ -54,10 +54,6 @@ describe('Issues -> Merged View', function () {
         project={project}
         params={{orgId: 'orgId', groupId: 'groupId'}}
         location={router.location}
-        routeParams={{}}
-        route={{}}
-        routes={router.routes}
-        router={router}
       />,
       {router}
     );
@@ -81,10 +77,6 @@ describe('Issues -> Merged View', function () {
         project={project}
         params={{orgId: 'orgId', groupId: 'groupId'}}
         location={router.location}
-        routeParams={{}}
-        route={{}}
-        routes={router.routes}
-        router={router}
       />,
       {router}
     );

static/app/views/issueDetails/groupMerged/index.tsx

@@ -19,9 +19,9 @@ import withOrganization from 'sentry/utils/withOrganization';
 
 import MergedList from './mergedList';
 
-type Props = RouteComponentProps<
-  {groupId: Group['id']; orgId: Organization['slug']},
-  {}
+type Props = Pick<
+  RouteComponentProps<{groupId: Group['id']; orgId: Organization['slug']}, {}>,
+  'params' | 'location'
 > & {
   organization: Organization;
   project: Project;

static/app/views/issueDetails/groupMerged/mergedIssuesDataSection.tsx

@@ -0,0 +1,36 @@
+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 useOrganization from 'sentry/utils/useOrganization';
+import GroupMergedView from 'sentry/views/issueDetails/groupMerged';
+import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
+
+interface MergedIssuesDataSectionProps {
+  group: Group;
+  project: Project;
+}
+
+export function MergedIssuesDataSection({project, group}: MergedIssuesDataSectionProps) {
+  const organization = useOrganization();
+  const location = useLocation();
+
+  return (
+    <FoldSection
+      sectionKey={SectionKey.MERGED_ISSUES}
+      title={t('Merged Issues')}
+      initialCollapse
+    >
+      <GroupMergedView
+        project={project}
+        params={{
+          groupId: group.id,
+          orgId: organization.id,
+        }}
+        organization={organization}
+        location={location}
+      />
+    </FoldSection>
+  );
+}

static/app/views/issueDetails/groupRelatedIssues/index.spec.tsx

@@ -1,5 +1,4 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
-import {RouterFixture} from 'sentry-fixture/routerFixture';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
@@ -9,7 +8,6 @@ describe('Related Issues View', function () {
   let sameRootIssuesMock: jest.Mock;
   let traceIssuesMock: jest.Mock;
   let issuesMock: jest.Mock;
-  const router = RouterFixture();
 
   const organization = OrganizationFixture();
   const orgSlug = organization.slug;
@@ -85,16 +83,7 @@ describe('Related Issues View', function () {
       body: issuesData,
     });
 
-    render(
-      <GroupRelatedIssues
-        params={params}
-        location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
-      />
-    );
+    render(<GroupRelatedIssues params={params} />);
 
     // Wait for the issues showing up on the table
     expect(await screen.findByText(`EARTH-${group1}`)).toBeInTheDocument();
@@ -123,16 +112,7 @@ describe('Related Issues View', function () {
       url: orgIssuesEndpoint,
       body: issuesData,
     });
-    render(
-      <GroupRelatedIssues
-        params={params}
-        location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
-      />
-    );
+    render(<GroupRelatedIssues params={params} />);
 
     // Wait for the issues showing up on the table
     expect(await screen.findByText(`EARTH-${group1}`)).toBeInTheDocument();

static/app/views/issueDetails/groupRelatedIssues/index.tsx

@@ -16,7 +16,7 @@ type RouteParams = {
   groupId: string;
 };
 
-type Props = RouteComponentProps<RouteParams, {}>;
+type Props = Pick<RouteComponentProps<RouteParams, {}>, 'params'>;
 
 type RelatedIssuesResponse = {
   data: number[];

static/app/views/issueDetails/groupSimilarIssues/index.spec.tsx

@@ -69,10 +69,6 @@ describe('Issues Similar View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );
@@ -98,10 +94,6 @@ describe('Issues Similar View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );
@@ -131,10 +123,6 @@ describe('Issues Similar View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );
@@ -162,10 +150,6 @@ describe('Issues Similar View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );
@@ -239,10 +223,6 @@ describe('Issues Similar Embeddings View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );
@@ -269,10 +249,6 @@ describe('Issues Similar Embeddings View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );
@@ -302,10 +278,6 @@ describe('Issues Similar Embeddings View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );
@@ -325,10 +297,6 @@ describe('Issues Similar Embeddings View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );
@@ -362,10 +330,6 @@ describe('Issues Similar Embeddings View', function () {
         project={project}
         params={{orgId: 'org-slug', groupId: 'group-id'}}
         location={router.location}
-        router={router}
-        routeParams={router.params}
-        routes={router.routes}
-        route={{}}
       />,
       {router}
     );

static/app/views/issueDetails/groupSimilarIssues/similarIssuesDataSection.tsx

@@ -0,0 +1,38 @@
+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 useOrganization from 'sentry/utils/useOrganization';
+import GroupSimilarIssues from 'sentry/views/issueDetails/groupSimilarIssues';
+import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
+
+interface SimilarIssuesDataSectionProps {
+  group: Group;
+  project: Project;
+}
+
+export function SimilarIssuesDataSection({
+  project,
+  group,
+}: SimilarIssuesDataSectionProps) {
+  const organization = useOrganization();
+  const location = useLocation();
+
+  return (
+    <FoldSection
+      sectionKey={SectionKey.SIMILAR_ISSUES}
+      title={t('Similar Issues')}
+      initialCollapse
+    >
+      <GroupSimilarIssues
+        location={location}
+        params={{
+          groupId: group.id,
+          orgId: organization.id,
+        }}
+        project={project}
+      />
+    </FoldSection>
+  );
+}

static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/index.tsx

@@ -25,7 +25,7 @@ type RouteParams = {
   orgId: string;
 };
 
-type Props = RouteComponentProps<RouteParams, {}> & {
+type Props = Pick<RouteComponentProps<RouteParams, {}>, 'params' | 'location'> & {
   location: Location;
   project: Project;
 };

static/app/views/issueDetails/header.tsx

@@ -38,7 +38,7 @@ import {useIssueDetailsHeader} from 'sentry/views/issueDetails/useIssueDetailsHe
 
 import GroupActions from './actions';
 import {Tab} from './types';
-import type {ReprocessingStatus} from './utils';
+import {type ReprocessingStatus, useHasStreamlinedUI} from './utils';
 
 type Props = {
   baseUrl: string;
@@ -63,6 +63,7 @@ export function GroupHeaderTabs({
 }: GroupHeaderTabsProps) {
   const organization = useOrganization();
   const location = useLocation();
+  const hasStreamlinedUI = useHasStreamlinedUI();
 
   const {getReplayCountForIssue} = useReplayCountForIssues({
     statsPeriod: '90d',
@@ -94,7 +95,73 @@ export function GroupHeaderTabs({
     }
   }, [group.issueType, organization]);
 
-  return (
+  return hasStreamlinedUI ? (
+    <StyledTabList hideBorder>
+      <TabList.Item
+        key={Tab.DETAILS}
+        disabled={disabledTabs.includes(Tab.DETAILS)}
+        to={`${baseUrl}${location.search}`}
+      >
+        {t('Details')}
+      </TabList.Item>
+      <TabList.Item
+        key={Tab.ACTIVITY}
+        textValue={t('Activity')}
+        disabled={disabledTabs.includes(Tab.ACTIVITY)}
+        to={{pathname: `${baseUrl}activity/`, query: queryParams}}
+      >
+        {t('Activity')}
+        <IconBadge>
+          {group.numComments}
+          <IconChat size="xs" />
+        </IconBadge>
+      </TabList.Item>
+      <TabList.Item
+        key={Tab.USER_FEEDBACK}
+        textValue={t('User Feedback')}
+        hidden={!issueTypeConfig.userFeedback.enabled}
+        disabled={disabledTabs.includes(Tab.USER_FEEDBACK)}
+        to={{pathname: `${baseUrl}feedback/`, query: queryParams}}
+      >
+        {t('User Feedback')} <Badge text={group.userReportCount} />
+      </TabList.Item>
+      <TabList.Item
+        key={Tab.ATTACHMENTS}
+        hidden={!hasEventAttachments || !issueTypeConfig.attachments.enabled}
+        disabled={disabledTabs.includes(Tab.ATTACHMENTS)}
+        to={{pathname: `${baseUrl}attachments/`, query: queryParams}}
+      >
+        {t('Attachments')}
+      </TabList.Item>
+      <TabList.Item
+        key={Tab.TAGS}
+        hidden={!issueTypeConfig.tags.enabled}
+        disabled={disabledTabs.includes(Tab.TAGS)}
+        to={{pathname: `${baseUrl}tags/`, query: queryParams}}
+      >
+        {t('Tags')}
+      </TabList.Item>
+      <TabList.Item
+        key={Tab.EVENTS}
+        hidden={!issueTypeConfig.events.enabled}
+        disabled={disabledTabs.includes(Tab.EVENTS)}
+        to={eventRoute}
+      >
+        {group.issueCategory === IssueCategory.ERROR
+          ? t('All Events')
+          : t('Sampled Events')}
+      </TabList.Item>
+      <TabList.Item
+        key={Tab.REPLAYS}
+        textValue={t('Replays')}
+        hidden={!hasReplaySupport || !issueTypeConfig.replays.enabled}
+        to={{pathname: `${baseUrl}replays/`, query: queryParams}}
+      >
+        {t('Replays')}
+        <ReplayCountBadge count={replaysCount} />
+      </TabList.Item>
+    </StyledTabList>
+  ) : (
     <StyledTabList hideBorder>
       <TabList.Item
         key={Tab.DETAILS}

static/app/views/issueDetails/streamline/context.tsx

@@ -55,6 +55,9 @@ export const enum SectionKey {
   PROCESSING_ERROR = 'processing-error',
   RRWEB = 'rrweb', // Legacy integration prior to replays
 
+  MERGED_ISSUES = 'merged',
+  SIMILAR_ISSUES = 'similar',
+
   REGRESSION_SUMMARY = 'regression-summary',
   REGRESSION_BREAKPOINT_CHART = 'regression-breakpoint-chart',
   REGRESSION_FLAMEGRAPH = 'regression-flamegraph',

static/app/views/issueDetails/streamline/eventDetails.spec.tsx

@@ -13,6 +13,7 @@ import ProjectsStore from 'sentry/stores/projectsStore';
 import {EventDetails} from 'sentry/views/issueDetails/streamline/eventDetails';
 
 jest.mock('sentry/views/issueDetails/groupEventDetails/groupEventDetailsContent');
+jest.mock('sentry/views/issueDetails/streamline/issueContent');
 jest.mock('screenfull', () => ({
   enabled: true,
   isFullscreen: false,