ref(replay): gate ai summary behind gen-ai-features flag (#95469)

Author: michellewzhang

static/app/utils/replays/hooks/useActiveReplayTab.spec.tsx

@@ -17,12 +17,29 @@ describe('useActiveReplayTab', () => {
     setWindowLocation('http://localhost/');
   });
 
-  describe('without replay-ai-summaries feature flag', () => {
-    it('should use Breadcrumbs as a default', () => {
+  describe('without both replay-ai-summaries and gen-ai-features feature flags', () => {
+    it('should use Breadcrumbs as a default when only gen-ai-features is enabled', () => {
       const {result} = renderHook(useActiveReplayTab, {
         initialProps: {},
         wrapper: ({children}) => (
-          <OrganizationContext value={OrganizationFixture({features: []})}>
+          <OrganizationContext
+            value={OrganizationFixture({features: ['gen-ai-features']})}
+          >
+            {children}
+          </OrganizationContext>
+        ),
+      });
+
+      expect(result.current.getActiveTab()).toBe(TabKey.BREADCRUMBS);
+    });
+
+    it('should use Breadcrumbs as a default when only replay-ai-summaries is enabled', () => {
+      const {result} = renderHook(useActiveReplayTab, {
+        initialProps: {},
+        wrapper: ({children}) => (
+          <OrganizationContext
+            value={OrganizationFixture({features: ['replay-ai-summaries']})}
+          >
             {children}
           </OrganizationContext>
         ),
@@ -90,7 +107,9 @@ describe('useActiveReplayTab', () => {
         initialProps: {},
         wrapper: ({children}) => (
           <OrganizationContext
-            value={OrganizationFixture({features: ['replay-ai-summaries']})}
+            value={OrganizationFixture({
+              features: ['replay-ai-summaries', 'gen-ai-features'],
+            })}
           >
             {children}
           </OrganizationContext>
@@ -107,7 +126,9 @@ describe('useActiveReplayTab', () => {
         initialProps: {},
         wrapper: ({children}) => (
           <OrganizationContext
-            value={OrganizationFixture({features: ['replay-ai-summaries']})}
+            value={OrganizationFixture({
+              features: ['replay-ai-summaries', 'gen-ai-features'],
+            })}
           >
             {children}
           </OrganizationContext>
@@ -122,7 +143,9 @@ describe('useActiveReplayTab', () => {
         initialProps: {},
         wrapper: ({children}) => (
           <OrganizationContext
-            value={OrganizationFixture({features: ['replay-ai-summaries']})}
+            value={OrganizationFixture({
+              features: ['replay-ai-summaries', 'gen-ai-features'],
+            })}
           >
             {children}
           </OrganizationContext>

static/app/utils/replays/hooks/useActiveReplayTab.tsx

@@ -36,9 +36,11 @@ function useActiveReplayTab({isVideoReplay = false}: {isVideoReplay?: boolean})
   const organization = useOrganization();
 
   // Use AI as default tab if user has the replay-ai-summaries feature flag, otherwise use breadcrumbs
-  const defaultTab = organization.features.includes('replay-ai-summaries')
-    ? TabKey.AI
-    : TabKey.BREADCRUMBS;
+  const defaultTab =
+    organization.features.includes('replay-ai-summaries') &&
+    organization.features.includes('gen-ai-features')
+      ? TabKey.AI
+      : TabKey.BREADCRUMBS;
 
   const {getParamValue, setParamValue} = useUrlParams('t_main', defaultTab);
 

static/app/views/replays/detail/ai/ai.tsx

@@ -47,7 +47,8 @@ function AiContent() {
     enabled: Boolean(
       replayRecord?.id &&
         project?.slug &&
-        organization.features.includes('replay-ai-summaries')
+        organization.features.includes('replay-ai-summaries') &&
+        organization.features.includes('gen-ai-features')
     ),
     retry: false,
   });
@@ -78,7 +79,10 @@ function AiContent() {
     ) : null;
   };
 
-  if (!organization.features.includes('replay-ai-summaries')) {
+  if (
+    !organization.features.includes('replay-ai-summaries') ||
+    !organization.features.includes('gen-ai-features')
+  ) {
     return (
       <SummaryContainer>
         <Alert type="info">

static/app/views/replays/detail/layout/focusTabs.tsx

@@ -22,18 +22,20 @@ function getReplayTabs({
 }): Record<TabKey, ReactNode> {
   // For video replays, we hide the memory tab (not applicable for mobile)
   return {
-    [TabKey.AI]: organization.features.includes('replay-ai-summaries') ? (
-      <Flex align="center" gap={space(0.75)}>
-        {t('Summary')}
-        <Tooltip
-          title={t(
-            'This feature is experimental! Try it out and let us know what you think. No promises!'
-          )}
-        >
-          <IconLab isSolid />
-        </Tooltip>
-      </Flex>
-    ) : null,
+    [TabKey.AI]:
+      organization.features.includes('replay-ai-summaries') &&
+      organization.features.includes('gen-ai-features') ? (
+        <Flex align="center" gap={space(0.75)}>
+          {t('Summary')}
+          <Tooltip
+            title={t(
+              'This feature is experimental! Try it out and let us know what you think. No promises!'
+            )}
+          >
+            <IconLab isSolid />
+          </Tooltip>
+        </Flex>
+      ) : null,
     [TabKey.BREADCRUMBS]: t('Breadcrumbs'),
     [TabKey.CONSOLE]: t('Console'),
     [TabKey.NETWORK]: t('Network'),