feat(insights): update module title for http module in the frontend (g…

…etsentry#79690)

Work for getsentry#77572 

This PR ensures frontend domain calls the HTTP module `Network Requests`
in the frontend view, and `Outbound Api Requests` in backend
<img width="832" alt="image"
src="https://github.com/user-attachments/assets/a24a2877-8b90-49bc-a7a3-d8ff1843715e">

This is done using a new hook called `useModuleTitle` which will return
the correct title depending on the current domain view. (Similar to
`useModuleUrl`)

static/app/views/insights/common/components/modulePageProviders.tsx

@@ -10,7 +10,8 @@ import type {InsightEventKey} from 'sentry/utils/analytics/insightAnalyticEvents
 import useOrganization from 'sentry/utils/useOrganization';
 import {NoAccess} from 'sentry/views/insights/common/components/noAccess';
 import {useHasDataTrackAnalytics} from 'sentry/views/insights/common/utils/useHasDataTrackAnalytics';
-import {INSIGHTS_TITLE, MODULE_TITLES} from 'sentry/views/insights/settings';
+import {useModuleTitles} from 'sentry/views/insights/common/utils/useModuleTitle';
+import {INSIGHTS_TITLE} from 'sentry/views/insights/settings';
 import type {ModuleName} from 'sentry/views/insights/types';
 
 type ModuleNameStrings = `${ModuleName}`;
@@ -32,10 +33,11 @@ export function ModulePageProviders({
   analyticEventName,
 }: Props) {
   const organization = useOrganization();
+  const moduleTitles = useModuleTitles();
 
   useHasDataTrackAnalytics(moduleName as ModuleName, analyticEventName);
 
-  const moduleTitle = MODULE_TITLES[moduleName];
+  const moduleTitle = moduleTitles[moduleName];
 
   const fullPageTitle = [pageTitle, moduleTitle, INSIGHTS_TITLE]
     .filter(Boolean)

static/app/views/insights/common/utils/moduleTitles.tsx

@@ -2,13 +2,17 @@ import {MODULE_TITLE as RESOURCES_MODULE_TITLE} from 'sentry/views/insights/brow
 import {MODULE_TITLE as VITALS_MODULE_TITLE} from 'sentry/views/insights/browser/webVitals/settings';
 import {MODULE_TITLE as CACHE_MODULE_TITLE} from 'sentry/views/insights/cache/settings';
 import {MODULE_TITLE as DB_MODULE_TITLE} from 'sentry/views/insights/database/settings';
-import {MODULE_TITLE as HTTP_MODULE_TITLE} from 'sentry/views/insights/http/settings';
+import {
+  FRONTEND_MODULE_TITLE as HTTP_FRONTEND_MODULE_TITLE,
+  MODULE_TITLE as HTTP_MODULE_TITLE,
+} from 'sentry/views/insights/http/settings';
 import {MODULE_TITLE as AI_MODULE_TITLE} from 'sentry/views/insights/llmMonitoring/settings';
 import {MODULE_TITLE as APP_STARTS_MODULE_TITLE} from 'sentry/views/insights/mobile/appStarts/settings';
 import {MODULE_TITLE as SCREEN_LOADS_MODULE_TITLE} from 'sentry/views/insights/mobile/screenload/settings';
 import {MODULE_TITLE as SCREEN_RENDERING_MODULE_TITLE} from 'sentry/views/insights/mobile/screenRendering/settings';
 import {MODULE_TITLE as MOBILE_VITALS_MODULE_TITLE} from 'sentry/views/insights/mobile/screens/settings';
 import {MODULE_TITLE as MOBILE_UI_MODULE_TITLE} from 'sentry/views/insights/mobile/ui/settings';
+import type {DomainView} from 'sentry/views/insights/pages/useFilters';
 import {MODULE_TITLE as QUEUE_MODULE_TITLE} from 'sentry/views/insights/queues/settings';
 import {ModuleName} from 'sentry/views/insights/types';
 
@@ -27,3 +31,19 @@ export const MODULE_TITLES: Record<ModuleName, string> = {
   [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_MODULE_TITLE,
   [ModuleName.OTHER]: '',
 };
+
+/**
+ * These are overrides for the module titles for each domain view,
+ * If a module is not listed here, it will use the default module title from MODULE_TITLES
+ */
+export const DOMAIN_VIEW_MODULE_TITLES: Record<
+  DomainView,
+  Partial<Record<ModuleName, string>>
+> = {
+  ai: {},
+  backend: {},
+  mobile: {},
+  frontend: {
+    [ModuleName.HTTP]: HTTP_FRONTEND_MODULE_TITLE,
+  },
+};

static/app/views/insights/common/utils/useModuleTitle.tsx

@@ -0,0 +1,23 @@
+import {useMemo} from 'react';
+
+import {DOMAIN_VIEW_MODULE_TITLES} from 'sentry/views/insights/common/utils/moduleTitles';
+import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
+import {MODULE_TITLES} from 'sentry/views/insights/settings';
+import type {ModuleName} from 'sentry/views/insights/types';
+
+export const useModuleTitles = (): Record<ModuleName, string> => {
+  const {isInDomainView, view} = useDomainViewFilters();
+  const moduleTitles = useMemo(() => {
+    let titles = {...MODULE_TITLES};
+    if (isInDomainView && view) {
+      titles = {...MODULE_TITLES, ...DOMAIN_VIEW_MODULE_TITLES[view]};
+    }
+    return titles;
+  }, [isInDomainView, view]);
+
+  return moduleTitles;
+};
+
+export const useModuleTitle = (moduleName: ModuleName): string => {
+  return useModuleTitles()[moduleName];
+};

static/app/views/insights/http/settings.ts

@@ -2,6 +2,7 @@ import {t} from 'sentry/locale';
 import {ModuleName} from 'sentry/views/insights/types';
 
 export const MODULE_TITLE = t('Outbound API Requests');
+export const FRONTEND_MODULE_TITLE = t('Network Requests');
 export const MODULE_SIDEBAR_TITLE = t('Requests');
 export const DATA_TYPE = t('Request');
 export const DATA_TYPE_PLURAL = t('Requests');

static/app/views/insights/http/views/httpLandingPage.tsx

@@ -23,6 +23,7 @@ import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
 import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {useModuleBreadcrumbs} from 'sentry/views/insights/common/utils/useModuleBreadcrumbs';
+import {useModuleTitle} from 'sentry/views/insights/common/utils/useModuleTitle';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
 import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector';
 import {DurationChart} from 'sentry/views/insights/http/components/charts/durationChart';
@@ -37,7 +38,6 @@ import {
   BASE_FILTERS,
   MODULE_DESCRIPTION,
   MODULE_DOC_LINK,
-  MODULE_TITLE,
 } from 'sentry/views/insights/http/settings';
 import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
 import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings';
@@ -50,6 +50,7 @@ export function HTTPLandingPage() {
   const organization = useOrganization();
   const location = useLocation();
   const {isInDomainView, view} = useDomainViewFilters();
+  const moduleTitle = useModuleTitle(ModuleName.HTTP);
 
   const sortField = decodeScalar(location.query?.[QueryParameterNames.DOMAINS_SORT]);
 
@@ -166,7 +167,7 @@ export function HTTPLandingPage() {
 
   const headerTitle = (
     <Fragment>
-      {MODULE_TITLE}
+      {moduleTitle}
       <PageHeadingQuestionTooltip docsUrl={MODULE_DOC_LINK} title={MODULE_DESCRIPTION} />
     </Fragment>
   );
@@ -192,7 +193,7 @@ export function HTTPLandingPage() {
         <FrontendHeader
           headerTitle={
             <Fragment>
-              {MODULE_TITLE}
+              {moduleTitle}
               <PageHeadingQuestionTooltip
                 docsUrl={MODULE_DOC_LINK}
                 title={MODULE_DESCRIPTION}

static/app/views/insights/pages/domainViewHeader.tsx

@@ -8,12 +8,12 @@ import {TabList, Tabs} from 'sentry/components/tabs';
 import {t} from 'sentry/locale';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useModuleTitles} from 'sentry/views/insights/common/utils/useModuleTitle';
 import {
   type RoutableModuleNames,
   useModuleURLBuilder,
 } from 'sentry/views/insights/common/utils/useModuleURL';
 import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
-import {MODULE_TITLES} from 'sentry/views/insights/settings';
 import type {ModuleName} from 'sentry/views/insights/types';
 
 export type Props = {
@@ -47,6 +47,7 @@ export function DomainViewHeader({
   const navigate = useNavigate();
   const organization = useOrganization();
   const moduleURLBuilder = useModuleURLBuilder();
+  const moduleTitles = useModuleTitles();
 
   const baseCrumbs: Crumb[] = [
     {
@@ -60,7 +61,7 @@ export function DomainViewHeader({
       preservePageFilters: true,
     },
     {
-      label: selectedModule ? MODULE_TITLES[selectedModule] : OVERVIEW_PAGE_TITLE,
+      label: selectedModule ? moduleTitles[selectedModule] : OVERVIEW_PAGE_TITLE,
       to: selectedModule
         ? `${moduleURLBuilder(selectedModule as RoutableModuleNames)}/`
         : domainBaseUrl,
@@ -102,7 +103,7 @@ export function DomainViewHeader({
     tabList.push(
       ...modules.map(moduleName => ({
         key: moduleName,
-        label: MODULE_TITLES[moduleName],
+        label: moduleTitles[moduleName],
       }))
     );
   }

static/app/views/performance/landing/widgets/components/selectableList.tsx

@@ -14,11 +14,10 @@ import {getConfigurePerformanceDocsLink} from 'sentry/utils/docs';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import {CACHE_BASE_URL} from 'sentry/views/insights/cache/settings';
+import {useModuleTitle} from 'sentry/views/insights/common/utils/useModuleTitle';
 import {NoDataMessage} from 'sentry/views/insights/database/components/noDataMessage';
-import {
-  MODULE_DOC_LINK,
-  MODULE_TITLE as HTTP_MODULE_TITLE,
-} from 'sentry/views/insights/http/settings';
+import {MODULE_DOC_LINK} from 'sentry/views/insights/http/settings';
+import {ModuleName} from 'sentry/views/insights/types';
 import {getIsMultiProject} from 'sentry/views/performance/utils';
 
 type Props = {
@@ -150,6 +149,7 @@ export function HighestCacheMissRateTransactionsWidgetEmptyStateWarning() {
 export function WidgetAddInstrumentationWarning({type}: {type: 'db' | 'http'}) {
   const pageFilters = usePageFilters();
   const fullProjects = useProjects();
+  const httpModuleTitle = useModuleTitle(ModuleName.HTTP);
 
   const projects = pageFilters.selection.projects;
 
@@ -173,7 +173,7 @@ export function WidgetAddInstrumentationWarning({type}: {type: 'db' | 'http'}) {
         {tct(
           'No transactions with [spanCategory] spans found. You may need to add integrations to your [link] to capture these spans.',
           {
-            spanCategory: type === 'db' ? t('Database') : HTTP_MODULE_TITLE,
+            spanCategory: type === 'db' ? t('Database') : httpModuleTitle,
             link: (
               <ExternalLink href={docsLink}>
                 {t('performance monitoring setup')}