ref(groupingInfo): Move contributing values/all values switch to section header (#97718)

Author: shayna-ch

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

@@ -1,13 +1,14 @@
-import {Fragment} from 'react';
+import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
+import {Flex} from 'sentry/components/core/layout';
+import {SegmentedControl} from 'sentry/components/core/segmentedControl';
 import {GroupInfoSummary} from 'sentry/components/events/groupingInfo/groupingSummary';
 import {useEventGroupingInfo} from 'sentry/components/events/groupingInfo/useEventGroupingInfo';
 import {FeatureFeedback} from 'sentry/components/featureFeedback';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
@@ -27,6 +28,8 @@ export default function GroupingInfo({
   showGroupingConfig,
   group,
 }: GroupingSummaryProps) {
+  const [showNonContributing, setShowNonContributing] = useState(false);
+
   const hasStreamlinedUI = useHasStreamlinedUI();
 
   const {groupInfo, isPending, isError, isSuccess, hasPerformanceGrouping} =
@@ -81,12 +84,29 @@ export default function GroupingInfo({
           </div>
         )}
       </ConfigHeader>
+      <ToggleContainer>
+        <SegmentedControl
+          aria-label={t('Filter by contribution')}
+          size="xs"
+          value={showNonContributing ? 'all' : 'relevant'}
+          onChange={key => setShowNonContributing(key === 'all')}
+        >
+          <SegmentedControl.Item key="relevant">
+            {t('Contributing Values')}
+          </SegmentedControl.Item>
+          <SegmentedControl.Item key="all">{t('All Values')}</SegmentedControl.Item>
+        </SegmentedControl>
+      </ToggleContainer>
       {isError ? <LoadingError message={t('Failed to fetch grouping info.')} /> : null}
       {isPending && !hasPerformanceGrouping ? <LoadingIndicator /> : null}
       {hasPerformanceGrouping || isSuccess
         ? variants.map((variant, index) => (
             <Fragment key={variant.key}>
-              <GroupingVariant event={event} variant={variant} />
+              <GroupingVariant
+                event={event}
+                variant={variant}
+                showNonContributing={showNonContributing}
+              />
               {index < variants.length - 1 && <VariantDivider />}
             </Fragment>
           ))
@@ -98,11 +118,16 @@ export default function GroupingInfo({
 const ConfigHeader = styled('div')`
   display: flex;
   justify-content: space-between;
-  gap: ${space(1)};
-  margin-bottom: ${space(2)};
+  gap: ${p => p.theme.space.md};
+  margin-bottom: ${p => p.theme.space['2xs']};
+`;
+
+const ToggleContainer = styled(Flex)`
+  justify-content: flex-start;
+  padding-bottom: ${p => p.theme.space.lg};
 `;
 
 const VariantDivider = styled('hr')`
-  padding-top: ${space(1)};
+  padding-top: ${p => p.theme.space.md};
   border-top: 1px solid ${p => p.theme.border};
 `;

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

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

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

@@ -1,7 +1,5 @@
-import {useState} from 'react';
 import styled from '@emotion/styled';
 
-import {SegmentedControl} from 'sentry/components/core/segmentedControl';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import KeyValueList from 'sentry/components/events/interfaces/keyValueList';
 import type {RawSpanType} from 'sentry/components/events/interfaces/spans/types';
@@ -19,10 +17,10 @@ import {EventGroupVariantType} from 'sentry/types/event';
 import {capitalize} from 'sentry/utils/string/capitalize';
 
 import GroupingComponent from './groupingComponent';
-import {hasNonContributingComponent} from './utils';
 
 interface GroupingVariantProps {
   event: Event;
+  showNonContributing: boolean;
   variant: EventGroupVariant;
 }
 
@@ -69,9 +67,7 @@ function addFingerprintInfo(data: VariantData, variant: EventGroupVariant) {
   }
 }
 
-function GroupingVariant({event, variant}: GroupingVariantProps) {
-  const [showNonContributing, setShowNonContributing] = useState(false);
-
+function GroupingVariant({event, variant, showNonContributing}: GroupingVariantProps) {
   const getVariantData = (): [VariantData, EventGroupComponent | undefined] => {
     const data: VariantData = [];
     let component: EventGroupComponent | undefined;
@@ -157,22 +153,6 @@ function GroupingVariant({event, variant}: GroupingVariantProps) {
     return [data, component];
   };
 
-  const renderContributionToggle = () => {
-    return (
-      <SegmentedControl
-        aria-label={t('Filter by contribution')}
-        size="xs"
-        value={showNonContributing ? 'all' : 'relevant'}
-        onChange={key => setShowNonContributing(key === 'all')}
-      >
-        <SegmentedControl.Item key="relevant">
-          {t('Contributing values')}
-        </SegmentedControl.Item>
-        <SegmentedControl.Item key="all">{t('All values')}</SegmentedControl.Item>
-      </SegmentedControl>
-    );
-  };
-
   const renderTitle = () => {
     const isContributing = variant.hash !== null;
 
@@ -202,13 +182,10 @@ function GroupingVariant({event, variant}: GroupingVariantProps) {
     );
   };
 
-  const [data, component] = getVariantData();
+  const [data] = getVariantData();
   return (
     <VariantWrapper>
-      <Header>
-        {renderTitle()}
-        {hasNonContributingComponent(component) && renderContributionToggle()}
-      </Header>
+      <Header>{renderTitle()}</Header>
 
       <KeyValueList
         data={data.map(d => ({

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

@@ -1,22 +1,5 @@
 import type {EventGroupComponent} from 'sentry/types/event';
 
-export function hasNonContributingComponent(component: EventGroupComponent | undefined) {
-  if (component === undefined) {
-    return false;
-  }
-
-  if (!component.contributes) {
-    return true;
-  }
-
-  for (const value of component.values) {
-    if (value && typeof value === 'object' && hasNonContributingComponent(value)) {
-      return true;
-    }
-  }
-  return false;
-}
-
 export function shouldInlineComponentValue(component: EventGroupComponent) {
   return (component.values as EventGroupComponent[]).every(
     value => !value || typeof value !== 'object'