feat(flags): Add feature flags to bubbles + drawer (#92367)

This adds feature flags to release bubbles + drawer.

See
https://linear.app/getsentry/issue/REPLAY-18/add-feature-flags-into-bubbles

Depends on #92363

On issue details

![image](https://github.com/user-attachments/assets/103fa036-106a-4250-86dc-88fe02e7f63f)

Inside of drawer

![image](https://github.com/user-attachments/assets/22f85313-8104-47d3-a95e-1eefe6c0c80a)

---------

Co-authored-by: Andrew Liu <[email protected]>

Author: 2 people

static/app/components/featureFlags/featureFlagsLogTable.tsx

@@ -24,6 +24,7 @@ interface FeatureFlagsLogTableProps {
   onResizeColumn?: (columnIndex: number, nextColumn: GridColumnOrder<ColumnKey>) => void;
   onRowMouseOut?: (dataRow: RawFlag, key: number) => void;
   onRowMouseOver?: (dataRow: RawFlag, key: number) => void;
+  scrollable?: boolean;
 }
 
 export function FeatureFlagsLogTable({
@@ -37,6 +38,7 @@ export function FeatureFlagsLogTable({
   onRowMouseOver,
   onRowMouseOut,
   highlightedRowKey,
+  scrollable = false,
 }: FeatureFlagsLogTableProps) {
   const organization = useOrganization();
   const analyticsArea = useAnalyticsArea();
@@ -93,7 +95,7 @@ export function FeatureFlagsLogTable({
         onRowMouseOver={onRowMouseOver}
         onRowMouseOut={onRowMouseOut}
         highlightedRowKey={highlightedRowKey}
-        scrollable={false}
+        scrollable={scrollable}
         data-test-id="audit-log-table"
       />
 

static/app/components/featureFlags/hooks/useFetchGroupAndEvent.tsx

@@ -0,0 +1,57 @@
+import type {Event} from 'sentry/types/event';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useGroup} from 'sentry/views/issueDetails/useGroup';
+
+interface FetchGroupAndEventParams {
+  enabled: boolean;
+  eventId: string | undefined;
+  groupId: string | undefined;
+}
+
+export function useFetchGroupAndEvent({
+  eventId,
+  groupId,
+  enabled,
+}: FetchGroupAndEventParams) {
+  const organization = useOrganization();
+  const {
+    data: group,
+    isPending: isGroupPending,
+    isError: isGroupError,
+    error: groupError,
+  } = useGroup({
+    groupId: groupId!,
+    options: {enabled: enabled && Boolean(groupId && eventId)},
+  });
+
+  const projectSlug = group?.project.slug;
+  const {
+    data: event,
+    isPending: isEventPending,
+    isError: isEventError,
+    error: eventError,
+  } = useApiQuery<Event>(
+    [`/organizations/${organization.slug}/events/${projectSlug}:${eventId}/`],
+    {
+      staleTime: Infinity,
+      enabled: enabled && Boolean(eventId && projectSlug && organization.slug),
+    }
+  );
+
+  return {
+    event,
+    group,
+    eventFlags: event?.contexts?.flags?.values?.map(f => f.flag),
+
+    isPending: isGroupPending || isEventPending,
+    isGroupPending,
+    isEventPending,
+    isError: isGroupError || isEventError,
+    isGroupError,
+    isEventError,
+    error: groupError || eventError,
+    groupError,
+    eventError,
+  };
+}

static/app/components/featureFlags/hooks/useFlagSeries.tsx

@@ -73,6 +73,7 @@ export function useFlagSeries({event, flags}: FlagSeriesProps) {
 
   return {
     seriesName: t('Feature Flags'),
+    id: 'flag-lines',
     data: [],
     color: theme.blue200,
     markLine,

static/app/components/featureFlags/hooks/useFlagsInEvent.tsx

@@ -0,0 +1,158 @@
+import {useFetchGroupAndEvent} from 'sentry/components/featureFlags/hooks/useFetchGroupAndEvent';
+import {
+  useOrganizationFlagLog,
+  useOrganizationFlagLogInfinite,
+} from 'sentry/components/featureFlags/hooks/useOrganizationFlagLog';
+import type {Event} from 'sentry/types/event';
+import type {Group} from 'sentry/types/group';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useGroup} from 'sentry/views/issueDetails/useGroup';
+
+type FetchGroupAndEventParams = Parameters<typeof useFetchGroupAndEvent>[0];
+interface FlagsInEventParams extends FetchGroupAndEventParams {
+  query: Record<string, any>;
+  event?: Event;
+  group?: Group;
+}
+
+/**
+ * Returns the feature flags that have been changed in a given time period and that appear on the event.
+ */
+export function useFlagsInEventPaginated({
+  eventId,
+  groupId,
+  query,
+  enabled,
+}: FlagsInEventParams) {
+  const organization = useOrganization();
+  const {
+    group,
+    isGroupPending,
+    isGroupError,
+    groupError,
+    event,
+    isEventPending,
+    isEventError,
+    eventError,
+    eventFlags,
+    isPending,
+    isError,
+    error,
+  } = useFetchGroupAndEvent({
+    eventId,
+    groupId,
+    enabled,
+  });
+
+  const {
+    data: rawFlagData,
+    getResponseHeader,
+    isPending: isFlagsPending,
+    isError: isFlagsError,
+    error: flagsError,
+  } = useOrganizationFlagLog({
+    organization,
+    query: {
+      ...query,
+      flag: eventFlags,
+    },
+    enabled: enabled && Boolean(eventFlags?.length),
+  });
+  const pageLinks = getResponseHeader?.('Link') ?? null;
+
+  return {
+    flags: rawFlagData?.data ?? [],
+    event,
+    group,
+    pageLinks,
+
+    isPending: isPending || isFlagsPending,
+    isGroupPending,
+    isEventPending,
+    isFlagsPending,
+    isError: isError || isFlagsError,
+    isGroupError,
+    isEventError,
+    isFlagsError,
+    error: error || flagsError,
+    groupError,
+    eventError,
+    flagsError,
+  };
+}
+
+/**
+ * Returns the feature flags that have been changed in a given time period and that appear on the event.
+ */
+export function useFlagsInEvent({
+  eventId,
+  groupId,
+  group: groupProp,
+  event: eventProp,
+  query,
+  enabled,
+}: FlagsInEventParams) {
+  const organization = useOrganization();
+  const {
+    data: groupData,
+    isPending: isGroupPending,
+    isError: isGroupError,
+    error: groupError,
+  } = useGroup({
+    groupId: groupId!,
+    options: {enabled: enabled && Boolean(groupId && eventId && !groupProp)},
+  });
+  const group = groupProp ?? groupData;
+
+  const projectSlug = group?.project.slug;
+  const {
+    data: eventData,
+    isPending: isEventPending,
+    isError: isEventError,
+    error: eventError,
+  } = useApiQuery<Event>(
+    [`/organizations/${organization.slug}/events/${projectSlug}:${eventId}/`],
+    {
+      staleTime: Infinity,
+      enabled:
+        enabled && Boolean(eventId && projectSlug && organization.slug) && !eventProp,
+    }
+  );
+  const event = eventProp ?? eventData;
+
+  const eventFlags = event?.contexts?.flags?.values?.map(f => f.flag);
+
+  const {
+    data: rawFlagData,
+    isPending: isFlagsPending,
+    isError: isFlagsError,
+    error: flagsError,
+  } = useOrganizationFlagLogInfinite({
+    organization,
+    query: {
+      ...query,
+      flag: eventFlags,
+    },
+    enabled: enabled && Boolean(eventFlags?.length),
+  });
+
+  return {
+    flags: rawFlagData ?? [],
+    event,
+    group,
+
+    isPending: isGroupPending || isEventPending || isFlagsPending,
+    isGroupPending,
+    isEventPending,
+    isFlagsPending,
+    isError: isGroupError || isEventError || isFlagsError,
+    isGroupError,
+    isEventError,
+    isFlagsError,
+    error: groupError || eventError || flagsError,
+    groupError,
+    eventError,
+    flagsError,
+  };
+}

static/app/components/featureFlags/hooks/useIntersectionFlags.tsx

@@ -1,16 +1,20 @@
+import {useEffect} from 'react';
+
 import type {RawFlagData} from 'sentry/components/featureFlags/utils';
 import type {Organization} from 'sentry/types/organization';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {useApiQuery, useInfiniteApiQuery} from 'sentry/utils/queryClient';
+
+interface Params {
+  organization: Organization;
+  query: Record<string, any>;
+  enabled?: boolean;
+}
 
 export function useOrganizationFlagLog({
   organization,
   query,
   enabled: enabledParam = true,
-}: {
-  organization: Organization;
-  query: Record<string, any>;
-  enabled?: boolean;
-}) {
+}: Params) {
   // Don't make the request if start = end. The backend returns 400 but we prefer an empty response.
   const enabled =
     (!query.start || !query.end || query.start !== query.end) && enabledParam;
@@ -23,3 +27,48 @@ export function useOrganizationFlagLog({
     }
   );
 }
+
+interface InfiniteParams extends Params {
+  maxPages?: number;
+}
+
+/**
+ * This is an analog to `useReleaseStats` where we fetch all pages of data so that we can render it on `<EventGraph />`.
+ */
+export function useOrganizationFlagLogInfinite({
+  organization,
+  query,
+  enabled: enabledParam = true,
+  maxPages = 10,
+}: InfiniteParams) {
+  // Don't make the request if start = end. The backend returns 400 but we prefer an empty response.
+  const enabled =
+    (!query.start || !query.end || query.start !== query.end) && enabledParam;
+
+  const apiQuery = useInfiniteApiQuery<RawFlagData>({
+    queryKey: [
+      'infinite' as const,
+      `/organizations/${organization.slug}/flags/logs/`,
+      {query},
+    ],
+    staleTime: 0,
+    enabled,
+  });
+
+  const currentNumberPages = apiQuery.data?.pages.length ?? 0;
+
+  useEffect(() => {
+    if (
+      !apiQuery.isFetching &&
+      apiQuery.hasNextPage &&
+      currentNumberPages + 1 < maxPages
+    ) {
+      apiQuery.fetchNextPage();
+    }
+  }, [apiQuery, maxPages, currentNumberPages]);
+
+  return {
+    ...apiQuery,
+    data: apiQuery.data?.pages.flatMap(([pageData]) => pageData.data),
+  };
+}

static/app/components/featureFlags/hooks/useOrganizationFlagLog.tsx

@@ -478,7 +478,7 @@ class GridEditable<
               )}
             </Header>
           )}
-          <Body style={bodyStyle}>
+          <Body style={bodyStyle} showVerticalScrollbar={scrollable}>
             <Grid
               aria-label={ariaLabel}
               data-test-id="grid-editable"