ref(groupingInfo): move groupingConfig to section header (#97696)

Author: shayna-ch

static/app/components/events/groupingInfo/groupingInfo.tsx

@@ -66,7 +66,12 @@ export default function GroupingInfo({
     <Fragment>
       <ConfigHeader>
         {hasStreamlinedUI && (
-          <GroupInfoSummary event={event} group={group} projectSlug={projectSlug} />
+          <GroupInfoSummary
+            event={event}
+            group={group}
+            projectSlug={projectSlug}
+            showGroupingConfig={showGroupingConfig}
+          />
         )}
         {hasStreamlinedUI ? (
           feedbackComponent
@@ -81,11 +86,7 @@ export default function GroupingInfo({
       {hasPerformanceGrouping || isSuccess
         ? variants.map((variant, index) => (
             <Fragment key={variant.key}>
-              <GroupingVariant
-                event={event}
-                showGroupingConfig={showGroupingConfig}
-                variant={variant}
-              />
+              <GroupingVariant event={event} variant={variant} />
               {index < variants.length - 1 && <VariantDivider />}
             </Fragment>
           ))

static/app/components/events/groupingInfo/groupingInfoSection.tsx

@@ -40,7 +40,12 @@ export function EventGroupingInfoSection({
       initialCollapse
     >
       {!hasStreamlinedUI && (
-        <GroupInfoSummary event={event} group={group} projectSlug={projectSlug} />
+        <GroupInfoSummary
+          event={event}
+          group={group}
+          projectSlug={projectSlug}
+          showGroupingConfig={showGroupingConfig}
+        />
       )}
       {hasStreamlinedUI || isOpen ? (
         <LazyLoad

static/app/components/events/groupingInfo/groupingSummary.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {useEventGroupingInfo} from 'sentry/components/events/groupingInfo/useEventGroupingInfo';
 import Placeholder from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
@@ -8,10 +10,12 @@ export function GroupInfoSummary({
   event,
   group,
   projectSlug,
+  showGroupingConfig,
 }: {
   event: Event;
   group: Group | undefined;
   projectSlug: string;
+  showGroupingConfig: boolean;
 }) {
   const {groupInfo, isPending, hasPerformanceGrouping} = useEventGroupingInfo({
     event,
@@ -26,13 +30,28 @@ export function GroupInfoSummary({
         .join(', ')
     : t('nothing');
 
+  const groupingConfig =
+    showGroupingConfig && groupInfo
+      ? (
+          Object.values(groupInfo).find(
+            variant => 'config' in variant && variant.config?.id
+          ) as any
+        )?.config?.id
+      : null;
+
   if (isPending && !hasPerformanceGrouping) {
     return <Placeholder height="20px" style={{marginBottom: '20px'}} />;
   }
 
   return (
     <p data-test-id="loaded-grouping-info">
       <strong>{t('Grouped by:')}</strong> {groupedBy}
+      {groupingConfig && (
+        <React.Fragment>
+          <br />
+          <strong>{t('Grouping Config:')}</strong> {groupingConfig}
+        </React.Fragment>
+      )}
     </p>
   );
 }

static/app/components/events/groupingInfo/groupingVariant.spec.tsx

@@ -52,13 +52,7 @@ describe('Grouping Variant', () => {
   };
 
   it('renders the span hashes for performance issues from event data', () => {
-    render(
-      <GroupingVariant
-        showGroupingConfig={false}
-        variant={performanceIssueVariant}
-        event={event}
-      />
-    );
+    render(<GroupingVariant variant={performanceIssueVariant} event={event} />);
 
     expect(
       within(screen.getByText('Parent Span Hashes').closest('tr') as HTMLElement)
@@ -78,13 +72,7 @@ describe('Grouping Variant', () => {
   });
 
   it('renders grouping details for occurrence-backed performance issues', () => {
-    render(
-      <GroupingVariant
-        showGroupingConfig={false}
-        variant={performanceIssueVariant}
-        event={occurrenceEvent}
-      />
-    );
+    render(<GroupingVariant variant={performanceIssueVariant} event={occurrenceEvent} />);
 
     expect(
       within(screen.getByText('Parent Span Hashes').closest('tr') as HTMLElement)

static/app/components/events/groupingInfo/groupingVariant.tsx

@@ -23,7 +23,6 @@ import {hasNonContributingComponent} from './utils';
 
 interface GroupingVariantProps {
   event: Event;
-  showGroupingConfig: boolean;
   variant: EventGroupVariant;
 }
 
@@ -70,7 +69,7 @@ function addFingerprintInfo(data: VariantData, variant: EventGroupVariant) {
   }
 }
 
-function GroupingVariant({event, showGroupingConfig, variant}: GroupingVariantProps) {
+function GroupingVariant({event, variant}: GroupingVariantProps) {
   const [showNonContributing, setShowNonContributing] = useState(false);
 
   const getVariantData = (): [VariantData, EventGroupComponent | undefined] => {
@@ -105,10 +104,6 @@ function GroupingVariant({event, showGroupingConfig, variant}: GroupingVariantPr
     switch (variant.type) {
       case EventGroupVariantType.COMPONENT:
         component = variant.component;
-
-        if (showGroupingConfig && variant.config?.id) {
-          data.push([t('Grouping Config'), variant.config.id]);
-        }
         break;
       case EventGroupVariantType.CUSTOM_FINGERPRINT:
         addFingerprintInfo(data, variant);
@@ -119,9 +114,6 @@ function GroupingVariant({event, showGroupingConfig, variant}: GroupingVariantPr
       case EventGroupVariantType.SALTED_COMPONENT:
         component = variant.component;
         addFingerprintInfo(data, variant);
-        if (showGroupingConfig && variant.config?.id) {
-          data.push([t('Grouping Config'), variant.config.id]);
-        }
         break;
       case EventGroupVariantType.PERFORMANCE_PROBLEM: {
         const spansToHashes = Object.fromEntries(