feat(escalating): Show group substatus badge on issue details (#49567)

static/app/components/group/inboxBadges/statusBadge.tsx

@@ -7,6 +7,7 @@ import {Group, GroupSubstatus} from 'sentry/types';
 interface SubstatusBadgeProps {
   status: Group['status'];
   substatus: Group['substatus'];
+  fontSize?: 'sm' | 'md';
 }
 
 function getBadgeProperties(
@@ -63,7 +64,11 @@ export function GroupStatusBadge(props: SubstatusBadgeProps) {
   }
 
   return (
-    <GroupStatusTag type={badge.tagType} tooltip={badge.tooltip}>
+    <GroupStatusTag
+      type={badge.tagType}
+      tooltip={badge.tooltip}
+      fontSize={props.fontSize}
+    >
       {badge.status}
     </GroupStatusTag>
   );

static/app/views/issueDetails/groupDetails.spec.jsx

@@ -64,17 +64,17 @@ describe('groupDetails', () => {
     );
   }
 
-  const createWrapper = (props = {selection}) => {
+  const createWrapper = (props = {selection}, org = organization) => {
     return render(
       <GroupDetails
         {...router}
         router={router}
         selection={props.selection}
-        organization={organization}
+        organization={org}
       >
         <MockComponent />
       </GroupDetails>,
-      {context: routerContext, organization, router}
+      {context: routerContext, organization: org, router}
     );
   };
 
@@ -245,14 +245,24 @@ describe('groupDetails', () => {
         },
       },
     });
-    act(() => ProjectsStore.reset());
     createWrapper();
-
-    act(() => ProjectsStore.loadInitialData(organization.projects));
-
     expect(await screen.findByText('New Issue')).toBeInTheDocument();
   });
 
+  it('renders substatus badge', async function () {
+    MockApiClient.addMockResponse({
+      url: `/issues/${group.id}/`,
+      body: {
+        ...group,
+        inbox: null,
+        status: 'unresolved',
+        substatus: 'ongoing',
+      },
+    });
+    createWrapper(undefined, {...organization, features: ['escalating-issues-ui']});
+    expect(await screen.findByText('Ongoing')).toBeInTheDocument();
+  });
+
   it('renders alert for sample event', async function () {
     const sampleGroup = TestStubs.Group({issueCategory: IssueCategory.ERROR});
     sampleGroup.tags.push({key: 'sample_event'});

static/app/views/issueDetails/header.tsx

@@ -13,6 +13,7 @@ import ErrorLevel from 'sentry/components/events/errorLevel';
 import EventMessage from 'sentry/components/events/eventMessage';
 import FeatureBadge from 'sentry/components/featureBadge';
 import InboxReason from 'sentry/components/group/inboxBadges/inboxReason';
+import {GroupStatusBadge} from 'sentry/components/group/inboxBadges/statusBadge';
 import UnhandledInboxTag from 'sentry/components/group/inboxBadges/unhandledTag';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
@@ -192,6 +193,7 @@ function GroupHeader({
   project,
 }: Props) {
   const location = useLocation();
+  const hasEscalatingIssuesUi = organization.features.includes('escalating-issues-ui');
 
   const disabledTabs = useMemo(() => {
     const hasReprocessingV2Feature = organization.features.includes('reprocessing-v2');
@@ -334,7 +336,16 @@ function GroupHeader({
               <h3>
                 <StyledEventOrGroupTitle hasGuideAnchor data={group} />
               </h3>
-              {group.inbox && <InboxReason inbox={group.inbox} fontSize="md" />}
+              {!hasEscalatingIssuesUi && group.inbox && (
+                <InboxReason inbox={group.inbox} fontSize="md" />
+              )}
+              {hasEscalatingIssuesUi && (
+                <GroupStatusBadge
+                  status={group.status}
+                  substatus={group.substatus}
+                  fontSize="md"
+                />
+              )}
             </TitleHeading>
             <StyledTagAndMessageWrapper>
               {group.level && <ErrorLevel level={group.level} size="11px" />}