feat(agents-insights): allow users to switch back to old view (#93930)

obostjancic · web-flow · commit f5fe6b08fe5f · 2025-06-20T12:19:52.000+02:00
diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx
@@ -52,7 +52,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useMedia from 'sentry/utils/useMedia';
 import useOrganization from 'sentry/utils/useOrganization';
 import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
-import {AgentInsightsFeature} from 'sentry/views/insights/agentMonitoring/utils/features';
+import {AIInsightsFeature} from 'sentry/views/insights/agentMonitoring/utils/features';
 import {MODULE_BASE_URLS} from 'sentry/views/insights/common/utils/useModuleURL';
 import {
   AGENTS_LANDING_SUB_PATH,
@@ -373,7 +373,7 @@ function Sidebar() {
           id="performance-domains-mobile"
           icon={<SubitemDot collapsed />}
         />
-        <AgentInsightsFeature
+        <AIInsightsFeature
           organization={organization}
           renderDisabled={() => (
             <SidebarItem
@@ -392,7 +392,7 @@ function Sidebar() {
             id="performance-domains-agents"
             icon={<SubitemDot collapsed />}
           />
-        </AgentInsightsFeature>
+        </AIInsightsFeature>
         <SidebarItem
           {...sidebarItemProps}
           label={t('Crons')}
diff --git a/static/app/types/user.tsx b/static/app/types/user.tsx
@@ -51,6 +51,7 @@ export interface User extends Omit<AvatarUser, 'options'> {
     clock24Hours: boolean;
     defaultIssueEvent: 'recommended' | 'latest' | 'oldest';
     language: string;
+    prefersAgentsInsightsModule: boolean;
     prefersChonkUI: boolean;
     prefersIssueDetailsStreamlinedUI: boolean | null;
     prefersNextjsInsightsOverview: boolean;
diff --git a/static/app/views/insights/agentMonitoring/components/aiModuleToggleButton.tsx b/static/app/views/insights/agentMonitoring/components/aiModuleToggleButton.tsx
@@ -0,0 +1,76 @@
+import type {Key} from 'react';
+import styled from '@emotion/styled';
+
+import DropdownButton from 'sentry/components/dropdownButton';
+import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {IconLab} from 'sentry/icons';
+import useMutateUserOptions from 'sentry/utils/useMutateUserOptions';
+import {useNavigate} from 'sentry/utils/useNavigate';
+import useOrganization from 'sentry/utils/useOrganization';
+import {
+  hasAgentInsightsFeature,
+  usePreferedAiModule,
+} from 'sentry/views/insights/agentMonitoring/utils/features';
+
+export function AiModuleToggleButton() {
+  const {mutate: mutateUserOptions} = useMutateUserOptions();
+  const preferedAiModule = usePreferedAiModule();
+  const navigate = useNavigate();
+  const organization = useOrganization();
+
+  const togglePreferedModule = () => {
+    const prefersAgentsInsightsModule = preferedAiModule === 'agents-insights';
+    const newPrefersAgentsInsightsModule = !prefersAgentsInsightsModule;
+    mutateUserOptions({
+      ['prefersAgentsInsightsModule']: newPrefersAgentsInsightsModule,
+    });
+
+    return newPrefersAgentsInsightsModule;
+  };
+
+  const handleExperimentDropdownAction = (key: Key) => {
+    if (key === 'ai-module') {
+      const prefersAgentsInsightsModule = togglePreferedModule();
+      if (prefersAgentsInsightsModule) {
+        navigate('/insights/agents');
+      } else {
+        navigate('/insights/ai/llm-monitoring');
+      }
+    }
+  };
+
+  if (!hasAgentInsightsFeature(organization)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu
+      trigger={triggerProps => (
+        <StyledDropdownButton {...triggerProps} size={'sm'}>
+          {/* Passing icon as child to avoid extra icon margin */}
+          <IconLab isSolid />
+        </StyledDropdownButton>
+      )}
+      onAction={handleExperimentDropdownAction}
+      items={[
+        {
+          key: 'ai-module',
+          leadingItems:
+            preferedAiModule === 'agents-insights' ? null : <IconLab isSolid />,
+          label:
+            preferedAiModule === 'agents-insights'
+              ? 'Switch to LLM Monitoring'
+              : 'Switch to Agents Insights',
+        },
+      ]}
+      position="bottom-end"
+    />
+  );
+}
+
+const StyledDropdownButton = styled(DropdownButton)`
+  color: ${p => p.theme.button.primary.background};
+  :hover {
+    color: ${p => p.theme.button.primary.background};
+  }
+`;
diff --git a/static/app/views/insights/agentMonitoring/utils/features.tsx b/static/app/views/insights/agentMonitoring/utils/features.tsx
@@ -1,16 +1,34 @@
 import Feature from 'sentry/components/acl/feature';
 import {NoAccess} from 'sentry/components/noAccess';
 import type {Organization} from 'sentry/types/organization';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useUser} from 'sentry/utils/useUser';
 
 type AgentInsightsFeatureProps = Omit<Parameters<typeof Feature>[0], 'features'>;
 
 export function hasAgentInsightsFeature(organization: Organization) {
   return organization.features.includes('agents-insights');
 }
 
-export function AgentInsightsFeature(props: AgentInsightsFeatureProps) {
+export function usePreferedAiModule() {
+  const organization = useOrganization();
+  const user = useUser();
+
+  if (!hasAgentInsightsFeature(organization)) {
+    return 'llm-monitoring';
+  }
+
+  return user.options.prefersAgentsInsightsModule ? 'agents-insights' : 'llm-monitoring';
+}
+
+export function AIInsightsFeature(props: AgentInsightsFeatureProps) {
+  const preferedAiModule = usePreferedAiModule();
+
   return (
-    <Feature features="agents-insights" renderDisabled={props.renderDisabled ?? NoAccess}>
+    <Feature
+      features={preferedAiModule}
+      renderDisabled={props.renderDisabled ?? NoAccess}
+    >
       {props.children}
     </Feature>
   );
diff --git a/static/app/views/insights/agentMonitoring/views/agentsOverviewPage.tsx b/static/app/views/insights/agentMonitoring/views/agentsOverviewPage.tsx
@@ -13,6 +13,7 @@ import {space} from 'sentry/styles/space';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {limitMaxPickableDays} from 'sentry/views/explore/utils';
+import {AiModuleToggleButton} from 'sentry/views/insights/agentMonitoring/components/aiModuleToggleButton';
 import LLMGenerationsWidget from 'sentry/views/insights/agentMonitoring/components/llmGenerationsWidget';
 import {ModelsTable} from 'sentry/views/insights/agentMonitoring/components/modelsTable';
 import TokenUsageWidget from 'sentry/views/insights/agentMonitoring/components/tokenUsageWidget';
@@ -23,7 +24,7 @@ import {
   TableType,
   useActiveTable,
 } from 'sentry/views/insights/agentMonitoring/hooks/useActiveTable';
-import {AgentInsightsFeature} from 'sentry/views/insights/agentMonitoring/utils/features';
+import {AIInsightsFeature} from 'sentry/views/insights/agentMonitoring/utils/features';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
@@ -56,7 +57,10 @@ function AgentsMonitoringPage() {
 
   return (
     <React.Fragment>
-      <AgentsPageHeader module={ModuleName.AGENTS} />
+      <AgentsPageHeader
+        module={ModuleName.AGENTS}
+        headerActions={<AiModuleToggleButton />}
+      />
       <ModuleBodyUpsellHook moduleName={ModuleName.AGENTS}>
         <Layout.Body>
           <Layout.Main fullWidth>
@@ -130,14 +134,14 @@ function AgentsMonitoringPage() {
 
 function PageWithProviders() {
   return (
-    <AgentInsightsFeature>
+    <AIInsightsFeature>
       <ModulePageProviders
         moduleName={ModuleName.AGENTS}
         analyticEventName="insight.page_loads.agents"
       >
         <AgentsMonitoringPage />
       </ModulePageProviders>
-    </AgentInsightsFeature>
+    </AIInsightsFeature>
   );
 }
 
diff --git a/static/app/views/insights/llmMonitoring/views/llmMonitoringLandingPage.tsx b/static/app/views/insights/llmMonitoring/views/llmMonitoringLandingPage.tsx
@@ -1,4 +1,5 @@
 import * as Layout from 'sentry/components/layouts/thirds';
+import {AiModuleToggleButton} from 'sentry/views/insights/agentMonitoring/components/aiModuleToggleButton';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
@@ -14,7 +15,7 @@ import {ModuleName} from 'sentry/views/insights/types';
 function LLMMonitoringPage() {
   return (
     <Layout.Page>
-      <AiHeader module={ModuleName.AI} />
+      <AiHeader module={ModuleName.AI} headerActions={<AiModuleToggleButton />} />
       <ModuleBodyUpsellHook moduleName={ModuleName.AI}>
         <Layout.Body>
           <Layout.Main fullWidth>
diff --git a/static/app/views/nav/secondary/sections/insights/insightsSecondaryNav.tsx b/static/app/views/nav/secondary/sections/insights/insightsSecondaryNav.tsx
@@ -5,7 +5,7 @@ import Feature from 'sentry/components/acl/feature';
 import {t} from 'sentry/locale';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
-import {AgentInsightsFeature} from 'sentry/views/insights/agentMonitoring/utils/features';
+import {AIInsightsFeature} from 'sentry/views/insights/agentMonitoring/utils/features';
 import {MODULE_BASE_URLS} from 'sentry/views/insights/common/utils/useModuleURL';
 import {
   AGENTS_LANDING_SUB_PATH,
@@ -75,7 +75,7 @@ export function InsightsSecondaryNav() {
             {MOBILE_SIDEBAR_LABEL}
           </SecondaryNav.Item>
 
-          <AgentInsightsFeature
+          <AIInsightsFeature
             organization={organization}
             renderDisabled={() => (
               <SecondaryNav.Item
@@ -92,7 +92,7 @@ export function InsightsSecondaryNav() {
             >
               {AGENTS_SIDEBAR_LABEL}
             </SecondaryNav.Item>
-          </AgentInsightsFeature>
+          </AIInsightsFeature>
         </SecondaryNav.Section>
         <SecondaryNav.Section id="insights-monitors">
           <SecondaryNav.Item to={`${baseUrl}/crons/`} analyticsItemName="insights_crons">
diff --git a/tests/js/fixtures/activityFeed.ts b/tests/js/fixtures/activityFeed.ts
@@ -35,6 +35,7 @@ export function ActivityFeedFixture(params: Partial<Activity> = {}): Activity {
         timezone: 'America/Los_Angeles',
         prefersIssueDetailsStreamlinedUI: false,
         prefersNextjsInsightsOverview: false,
+        prefersAgentsInsightsModule: false,
         prefersStackedNavigation: false,
         prefersChonkUI: false,
         quickStartDisplay: {},
diff --git a/tests/js/fixtures/commitAuthor.ts b/tests/js/fixtures/commitAuthor.ts
@@ -41,6 +41,7 @@ export function CommitAuthorFixture(params: Partial<User> = {}): User {
       prefersIssueDetailsStreamlinedUI: false,
       prefersStackedNavigation: false,
       prefersNextjsInsightsOverview: false,
+      prefersAgentsInsightsModule: false,
       prefersChonkUI: false,
       quickStartDisplay: {},
     },
diff --git a/tests/js/fixtures/user.ts b/tests/js/fixtures/user.ts
@@ -18,6 +18,7 @@ export function UserFixture(params: Partial<User> = {}): User {
       prefersIssueDetailsStreamlinedUI: true,
       prefersStackedNavigation: false,
       prefersNextjsInsightsOverview: false,
+      prefersAgentsInsightsModule: false,
       prefersChonkUI: false,
       quickStartDisplay: {},
     },
diff --git a/tests/js/fixtures/userDetails.ts b/tests/js/fixtures/userDetails.ts
@@ -33,6 +33,7 @@ export function UserDetailsFixture(params: Partial<User> = {}): User {
       theme: 'light',
       prefersIssueDetailsStreamlinedUI: false,
       prefersNextjsInsightsOverview: false,
+      prefersAgentsInsightsModule: false,
       prefersStackedNavigation: false,
       prefersChonkUI: false,
       quickStartDisplay: {},
