feat(insights): update headers and breadcrumbs on mobile/ai domain view

static/app/views/insights/llmMonitoring/views/llmMonitoringDetailsPage.tsx

@@ -1,3 +1,5 @@
+import {Fragment} from 'react';
+
 import FeatureBadge from 'sentry/components/badge/featureBadge';
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import * as Layout from 'sentry/components/layouts/thirds';
@@ -146,7 +148,20 @@ export function LLMMonitoringPage({params}: Props) {
 
         {isInDomainView && (
           <Layout.Header>
-            <AiHeader module={ModuleName.AI} />
+            <AiHeader
+              headerTitle={
+                <Fragment>
+                  {spanDescription}
+                  <FeatureBadge type={RELEASE_LEVEL} />
+                </Fragment>
+              }
+              breadcrumbs={[
+                {
+                  label: t('Pipeline Summary'),
+                },
+              ]}
+              module={ModuleName.AI}
+            />
           </Layout.Header>
         )}
         <Layout.Body>

static/app/views/insights/llmMonitoring/views/llmMonitoringLandingPage.tsx

@@ -1,3 +1,5 @@
+import {Fragment} from 'react';
+
 import FeatureBadge from 'sentry/components/badge/featureBadge';
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import ButtonBar from 'sentry/components/buttonBar';
@@ -65,7 +67,18 @@ export function LLMMonitoringPage() {
         )}
         {isInDomainView && (
           <Layout.Header>
-            <AiHeader module={ModuleName.AI} />
+            <AiHeader
+              headerTitle={
+                <Fragment>
+                  {MODULE_TITLE}
+                  <PageHeadingQuestionTooltip
+                    title={t('View analytics and information about your AI pipelines')}
+                    docsUrl={MODULE_DOC_LINK}
+                  />
+                </Fragment>
+              }
+              module={ModuleName.AI}
+            />
           </Layout.Header>
         )}
         <Layout.Body>

static/app/views/insights/mobile/screens/views/screensLandingPage.spec.tsx

@@ -83,7 +83,7 @@ describe('Screens Landing Page', function () {
         action: 'PUSH',
         hash: '',
         key: '',
-        pathname: '/organizations/org-slug/performance/mobile/mobile-screens',
+        pathname: '/organizations/org-slug/insights/mobile/mobile-screens',
         query: {
           project: project.id,
         },

static/app/views/insights/mobile/screens/views/screensLandingPage.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useState} from 'react';
+import {Fragment, useCallback, useState} from 'react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
@@ -314,7 +314,21 @@ export function ScreensLandingPage() {
               </Layout.HeaderActions>
             </Layout.Header>
           )}
-          {isInDomainView && <MobileHeader module={ModuleName.MOBILE_SCREENS} />}
+          {isInDomainView && (
+            <MobileHeader
+              headerTitle={
+                <Fragment>
+                  {MODULE_TITLE}
+                  <PageHeadingQuestionTooltip
+                    docsUrl={MODULE_DOC_LINK}
+                    title={MODULE_DESCRIPTION}
+                  />
+                </Fragment>
+              }
+              headerActions={isProjectCrossPlatform && <PlatformSelector />}
+              module={ModuleName.MOBILE_SCREENS}
+            />
+          )}
 
           <Layout.Body>
             <Layout.Main fullWidth>

static/app/views/insights/pages/ai/aiOverviewPage.tsx

@@ -24,6 +24,7 @@ import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLay
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {AiHeader} from 'sentry/views/insights/pages/ai/aiPageHeader';
+import {AI_LANDING_TITLE} from 'sentry/views/insights/pages/ai/settings';
 import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
 import {generateGenericPerformanceEventView} from 'sentry/views/performance/data';
 import {TripleChartRow} from 'sentry/views/performance/landing/widgets/components/widgetChartRow';
@@ -124,7 +125,7 @@ function AiOverviewPage() {
       renderDisabled={NoAccess}
     >
       <Layout.Header>
-        <AiHeader />
+        <AiHeader headerTitle={AI_LANDING_TITLE} />
       </Layout.Header>
       <Layout.Body>
         <Layout.Main fullWidth>

static/app/views/insights/pages/ai/aiPageHeader.tsx

@@ -4,17 +4,22 @@ import {
   AI_LANDING_SUB_PATH,
   AI_LANDING_TITLE,
 } from 'sentry/views/insights/pages/ai/settings';
-import {DomainViewHeader} from 'sentry/views/insights/pages/domainViewHeader';
+import {
+  DomainViewHeader,
+  type Props as HeaderProps,
+} from 'sentry/views/insights/pages/domainViewHeader';
 import {DOMAIN_VIEW_BASE_URL} from 'sentry/views/insights/pages/settings';
 import {ModuleName} from 'sentry/views/insights/types';
 
 type Props = {
-  headerActions?: React.ReactNode;
-  module?: ModuleName;
+  headerTitle: HeaderProps['headerTitle'];
+  breadcrumbs?: HeaderProps['additionalBreadCrumbs'];
+  headerActions?: HeaderProps['additonalHeaderActions'];
+  module?: HeaderProps['selectedModule'];
 };
 
 // TODO - add props to append to breadcrumbs and change title
-export function AiHeader({module, headerActions}: Props) {
+export function AiHeader({module, headerTitle, headerActions, breadcrumbs}: Props) {
   const {slug} = useOrganization();
 
   const aiBaseUrl = normalizeUrl(
@@ -26,10 +31,12 @@ export function AiHeader({module, headerActions}: Props) {
   return (
     <DomainViewHeader
       domainBaseUrl={aiBaseUrl}
-      headerTitle={AI_LANDING_TITLE}
+      headerTitle={headerTitle}
+      domainTitle={AI_LANDING_TITLE}
       modules={modules}
       selectedModule={module}
       additonalHeaderActions={headerActions}
+      additionalBreadCrumbs={breadcrumbs}
     />
   );
 }

static/app/views/insights/pages/backend/backendPageHeader.tsx

@@ -25,6 +25,7 @@ export function BackendHeader({module, headerActions}: Props) {
   return (
     <DomainViewHeader
       domainBaseUrl={backendBaseUrl}
+      domainTitle={BACKEND_LANDING_TITLE}
       headerTitle={BACKEND_LANDING_TITLE}
       additonalHeaderActions={headerActions}
       modules={modules}

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

@@ -18,8 +18,9 @@ import {isModuleEnabled} from 'sentry/views/insights/pages/utils';
 import {MODULE_TITLES} from 'sentry/views/insights/settings';
 import type {ModuleName} from 'sentry/views/insights/types';
 
-type Props = {
+export type Props = {
   domainBaseUrl: string;
+  domainTitle: string;
   headerTitle: React.ReactNode;
   modules: ModuleName[];
   selectedModule: ModuleName | undefined;
@@ -37,6 +38,7 @@ type Tab = {
 export function DomainViewHeader({
   modules,
   headerTitle,
+  domainTitle,
   selectedModule,
   hideDefaultTabs,
   additonalHeaderActions,
@@ -55,7 +57,7 @@ export function DomainViewHeader({
       preservePageFilters: true,
     },
     {
-      label: headerTitle,
+      label: domainTitle,
       to: domainBaseUrl,
       preservePageFilters: true,
     },

static/app/views/insights/pages/frontend/frontendPageHeader.tsx

@@ -26,6 +26,7 @@ export function FrontendHeader({module, headerActions}: Props) {
   return (
     <DomainViewHeader
       domainBaseUrl={frontendBaseUrl}
+      domainTitle={FRONTEND_LANDING_TITLE}
       modules={modules}
       selectedModule={module}
       additonalHeaderActions={headerActions}

static/app/views/insights/pages/mobile/mobileOverviewPage.tsx

@@ -24,6 +24,7 @@ import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {ViewTrendsButton} from 'sentry/views/insights/common/viewTrendsButton';
 import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
+import {MOBILE_LANDING_TITLE} from 'sentry/views/insights/pages/mobile/settings';
 import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
 import {
   generateGenericPerformanceEventView,
@@ -164,7 +165,10 @@ function MobileOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <MobileHeader headerActions={<ViewTrendsButton />} />
+      <MobileHeader
+        headerTitle={MOBILE_LANDING_TITLE}
+        headerActions={<ViewTrendsButton />}
+      />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>

static/app/views/insights/pages/mobile/mobilePageHeader.tsx

@@ -1,7 +1,9 @@
-import type {Crumb} from 'sentry/components/breadcrumbs';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import useOrganization from 'sentry/utils/useOrganization';
-import {DomainViewHeader} from 'sentry/views/insights/pages/domainViewHeader';
+import {
+  DomainViewHeader,
+  type Props as HeaderProps,
+} from 'sentry/views/insights/pages/domainViewHeader';
 import {
   MOBILE_LANDING_SUB_PATH,
   MOBILE_LANDING_TITLE,
@@ -11,15 +13,14 @@ import {isModuleEnabled} from 'sentry/views/insights/pages/utils';
 import {ModuleName} from 'sentry/views/insights/types';
 
 type Props = {
-  breadcrumbs?: Crumb[];
-  headerActions?: React.ReactNode;
-  headerTitle?: React.ReactNode;
-  hideDefaultTabs?: boolean;
-  module?: ModuleName;
-  tabs?: {onTabChange: (key: string) => void; tabList: React.ReactNode; value: string};
+  headerTitle: HeaderProps['headerTitle'];
+  breadcrumbs?: HeaderProps['additionalBreadCrumbs'];
+  headerActions?: HeaderProps['additonalHeaderActions'];
+  hideDefaultTabs?: HeaderProps['hideDefaultTabs'];
+  module?: HeaderProps['selectedModule'];
+  tabs?: HeaderProps['tabs'];
 };
 
-// TODO - add props to append to breadcrumbs and change title
 export function MobileHeader({
   module,
   hideDefaultTabs,
@@ -43,7 +44,8 @@ export function MobileHeader({
   return (
     <DomainViewHeader
       domainBaseUrl={mobileBaseUrl}
-      headerTitle={headerTitle || MOBILE_LANDING_TITLE}
+      domainTitle={MOBILE_LANDING_TITLE}
+      headerTitle={headerTitle}
       modules={modules}
       selectedModule={module}
       tabs={tabs}