feat(issues): Use the new suspect scores for flags in the event section (#91155)

ryan953 · web-flow · commit 4c4b80a8aa79 · 2025-05-08T12:09:16.000-07:00
Fixes getsentry/team-replay#579
diff --git a/static/app/components/events/featureFlags/eventFeatureFlagSection.tsx b/static/app/components/events/featureFlags/eventFeatureFlagSection.tsx
@@ -22,6 +22,9 @@ import {
   sortedFlags,
 } from 'sentry/components/events/featureFlags/utils';
 import useDrawer from 'sentry/components/globalDrawer';
+import {useGroupSuspectFlagScores} from 'sentry/components/issues/suspect/useGroupSuspectFlagScores';
+import useLegacyEventSuspectFlags from 'sentry/components/issues/suspect/useLegacyEventSuspectFlags';
+import useSuspectFlagScoreThreshold from 'sentry/components/issues/suspect/useSuspectFlagScoreThreshold';
 import {KeyValueData} from 'sentry/components/keyValueData';
 import {featureFlagOnboardingPlatforms} from 'sentry/data/platformCategories';
 import {IconMegaphone, IconSearch} from 'sentry/icons';
@@ -35,10 +38,10 @@ import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
-import useLegacyEventSuspectFlags from 'sentry/views/issueDetails/streamline/hooks/featureFlags/useLegacyEventSuspectFlags';
 import {useOrganizationFlagLog} from 'sentry/views/issueDetails/streamline/hooks/featureFlags/useOrganizationFlagLog';
 import {useIssueDetailsEventView} from 'sentry/views/issueDetails/streamline/hooks/useIssueDetailsDiscoverQuery';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
+import {useEnvironmentsFromUrl} from 'sentry/views/issueDetails/utils';
 
 export function EventFeatureFlagSection(props: EventFeatureFlagSectionProps) {
   return (
@@ -55,6 +58,9 @@ type EventFeatureFlagSectionProps = {
 };
 
 function BaseEventFeatureFlagList({event, group, project}: EventFeatureFlagSectionProps) {
+  const organization = useOrganization();
+  const environments = useEnvironmentsFromUrl();
+
   const openForm = useFeedbackForm();
   const feedbackButton = openForm ? (
     <Button
@@ -75,11 +81,14 @@ function BaseEventFeatureFlagList({event, group, project}: EventFeatureFlagSecti
     </Button>
   ) : null;
 
+  // If we're showing the suspect section at all
+  const enableSuspectFlags = organization.features.includes('feature-flag-suspect-flags');
+
   const [sortBy, setSortBy] = useState<SortBy>(SortBy.EVAL_ORDER);
   const [orderBy, setOrderBy] = useState<OrderBy>(OrderBy.NEWEST);
   const {closeDrawer, isDrawerOpen, openDrawer} = useDrawer();
   const viewAllButtonRef = useRef<HTMLButtonElement>(null);
-  const organization = useOrganization();
+
   const eventView = useIssueDetailsEventView({group});
   const {data: rawFlagData} = useOrganizationFlagLog({
     organization,
@@ -120,22 +129,31 @@ function BaseEventFeatureFlagList({event, group, project}: EventFeatureFlagSecti
     [organization, queryParams]
   );
 
-  const {
-    suspectFlags,
-    isError: isSuspectError,
-    isPending: isSuspectPending,
-  } = useLegacyEventSuspectFlags({
+  const {suspectFlags: legacySuspectFlags} = useLegacyEventSuspectFlags({
+    enabled: !enableSuspectFlags, // Fallback to the legacy strategy
     organization,
     firstSeen: group.firstSeen,
     rawFlagData,
     event,
   });
 
+  const [suspectThreshold] = useSuspectFlagScoreThreshold();
+  const {data: suspectScores} = useGroupSuspectFlagScores({
+    groupId: group.id,
+    environment: environments.length ? environments : undefined,
+    enabled: enableSuspectFlags,
+  });
+
   const suspectFlagNames: Set<string> = useMemo(() => {
-    return isSuspectError || isSuspectPending
-      ? new Set()
-      : new Set(suspectFlags.map(f => f.flag));
-  }, [isSuspectError, isSuspectPending, suspectFlags]);
+    if (enableSuspectFlags) {
+      return new Set(
+        suspectScores?.data
+          .filter(score => score.score >= suspectThreshold)
+          .map(score => score.flag)
+      );
+    }
+    return new Set(legacySuspectFlags.map(f => f.flag));
+  }, [enableSuspectFlags, legacySuspectFlags, suspectScores?.data, suspectThreshold]);
 
   const eventFlags: Array<Required<FeatureFlag>> = useMemo(() => {
     // At runtime there's no type guarantees on the event flags. So we have to
diff --git a/static/app/components/issues/suspect/constants.tsx b/static/app/components/issues/suspect/constants.tsx
@@ -0,0 +1 @@
+export const SUSPECT_SCORE_THRESHOLD = 7;
diff --git a/static/app/components/issues/suspect/suspectTable.tsx b/static/app/components/issues/suspect/suspectTable.tsx
@@ -7,13 +7,13 @@ import {Alert} from 'sentry/components/core/alert';
 import {NumberInput} from 'sentry/components/core/input/numberInput';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {OrderBy, SortBy} from 'sentry/components/events/featureFlags/utils';
+import useSuspectFlagScoreThreshold from 'sentry/components/issues/suspect/useSuspectFlagScoreThreshold';
 import {IconSentry} from 'sentry/icons/iconSentry';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Group} from 'sentry/types/group';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import toRoundedPercent from 'sentry/utils/number/toRoundedPercent';
-import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOrganization from 'sentry/utils/useOrganization';
 import FlagDetailsLink from 'sentry/views/issueDetails/groupFeatureFlags/details/flagDetailsLink';
 import useGroupFlagDrawerData from 'sentry/views/issueDetails/groupFeatureFlags/hooks/useGroupFlagDrawerData';
@@ -24,16 +24,9 @@ interface Props {
   group: Group;
 }
 
-const SUSPECT_SCORE_LOCAL_STATE_KEY = 'flag-drawer-suspicion-score-threshold';
-const SUSPECT_SCORE_THRESHOLD = 7;
-
 export default function SuspectTable({debugSuspectScores, environments, group}: Props) {
   const organization = useOrganization();
-
-  const [threshold, setThreshold] = useLocalStorageState(
-    SUSPECT_SCORE_LOCAL_STATE_KEY,
-    SUSPECT_SCORE_THRESHOLD
-  );
+  const [threshold, setThreshold] = useSuspectFlagScoreThreshold();
 
   const {displayFlags, isPending} = useGroupFlagDrawerData({
     environments,
diff --git a/static/app/components/issues/suspect/useGroupSuspectFlagScores.tsx b/static/app/components/issues/suspect/useGroupSuspectFlagScores.tsx
diff --git a/static/app/components/issues/suspect/useLegacyEventSuspectFlags.tsx b/static/app/components/issues/suspect/useLegacyEventSuspectFlags.tsx
@@ -20,11 +20,13 @@ import {
  * B) organization audit logs (queried from /logs/).
  */
 export default function useLegacyEventSuspectFlags({
-  organization,
+  enabled,
+  event,
   firstSeen,
+  organization,
   rawFlagData,
-  event,
 }: {
+  enabled: boolean;
   event: Event | undefined;
   firstSeen: string;
   organization: Organization;
@@ -57,7 +59,7 @@ export default function useLegacyEventSuspectFlags({
     {
       staleTime: 0,
       // if no intersection, then there are no suspect flags
-      enabled: Boolean(intersectionFlags.length),
+      enabled: enabled && Boolean(intersectionFlags.length),
     }
   );
 
diff --git a/static/app/components/issues/suspect/useSuspectFlagScoreThreshold.tsx b/static/app/components/issues/suspect/useSuspectFlagScoreThreshold.tsx
@@ -0,0 +1,8 @@
+import {SUSPECT_SCORE_THRESHOLD} from 'sentry/components/issues/suspect/constants';
+import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
+
+const SUSPECT_SCORE_LOCAL_STATE_KEY = 'flag-drawer-suspicion-score-threshold';
+
+export default function useSuspectFlagScoreThreshold() {
+  return useLocalStorageState(SUSPECT_SCORE_LOCAL_STATE_KEY, SUSPECT_SCORE_THRESHOLD);
+}
diff --git a/static/app/views/issueDetails/groupDistributions/flagsDistributionDrawer.tsx b/static/app/views/issueDetails/groupDistributions/flagsDistributionDrawer.tsx
@@ -8,6 +8,7 @@ import {Checkbox} from 'sentry/components/core/checkbox';
 import {EventDrawerBody, EventNavigator} from 'sentry/components/events/eventDrawer';
 import FeatureFlagSort from 'sentry/components/events/featureFlags/featureFlagSort';
 import {OrderBy, SortBy} from 'sentry/components/events/featureFlags/utils';
+import SuspectTable from 'sentry/components/issues/suspect/suspectTable';
 import {IconSentry} from 'sentry/icons/iconSentry';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -18,7 +19,6 @@ import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useParams} from 'sentry/utils/useParams';
 import GroupDistributionsSearchInput from 'sentry/views/issueDetails/groupDistributions/groupDistributionsSearchInput';
 import HeaderTitle from 'sentry/views/issueDetails/groupDistributions/headerTitle';
-import SuspectTable from 'sentry/views/issueDetails/groupDistributions/suspectTable';
 import TagFlagPicker from 'sentry/views/issueDetails/groupDistributions/tagFlagPicker';
 import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
 import {FlagDetailsDrawerContent} from 'sentry/views/issueDetails/groupFeatureFlags/details/flagDetailsDrawerContent';
diff --git a/static/app/views/issueDetails/groupDistributions/tagsDistributionDrawer.tsx b/static/app/views/issueDetails/groupDistributions/tagsDistributionDrawer.tsx
@@ -5,6 +5,7 @@ import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {EventDrawerBody, EventNavigator} from 'sentry/components/events/eventDrawer';
+import SuspectTable from 'sentry/components/issues/suspect/suspectTable';
 import {IconSort} from 'sentry/icons';
 import type {Group} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
@@ -13,7 +14,6 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {useParams} from 'sentry/utils/useParams';
 import GroupDistributionsSearchInput from 'sentry/views/issueDetails/groupDistributions/groupDistributionsSearchInput';
 import HeaderTitle from 'sentry/views/issueDetails/groupDistributions/headerTitle';
-import SuspectTable from 'sentry/views/issueDetails/groupDistributions/suspectTable';
 import TagExportDropdown from 'sentry/views/issueDetails/groupDistributions/tagExportDropdown';
 import TagFlagPicker from 'sentry/views/issueDetails/groupDistributions/tagFlagPicker';
 import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
diff --git a/static/app/views/issueDetails/groupFeatureFlags/hooks/useGroupFlagDrawerData.tsx b/static/app/views/issueDetails/groupFeatureFlags/hooks/useGroupFlagDrawerData.tsx
@@ -1,9 +1,9 @@
 import {useMemo} from 'react';
 
 import {OrderBy, SortBy} from 'sentry/components/events/featureFlags/utils';
+import {useGroupSuspectFlagScores} from 'sentry/components/issues/suspect/useGroupSuspectFlagScores';
 import type {Group} from 'sentry/types/group';
 import useGroupFeatureFlags from 'sentry/views/issueDetails/groupFeatureFlags/hooks/useGroupFeatureFlags';
-import {useGroupSuspectFlagScores} from 'sentry/views/issueDetails/groupFeatureFlags/hooks/useGroupSuspectFlagScores';
 import type {GroupTag} from 'sentry/views/issueDetails/groupTags/useGroupTags';
 
 interface SuspectGroupTag extends GroupTag {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const SUSPECT_SCORE_THRESHOLD = 7;`