From 3c6962ca3c5f2f0106e6885f98680848d7ef5688 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Thu, 10 Oct 2024 12:11:38 -0400
Subject: [PATCH 1/3] fix headers and breadcrumbs on frontend domain view

---
 .../resources/views/resourceSummaryPage.tsx   | 12 ++-
 .../resources/views/resourcesLandingPage.tsx  |  4 +-
 .../browser/webVitals/views/pageOverview.tsx  | 73 ++++++++++++++-----
 .../webVitals/views/webVitalsLandingPage.tsx  |  4 +-
 .../http/views/httpDomainSummaryPage.tsx      | 18 ++++-
 .../insights/http/views/httpLandingPage.tsx   |  2 +-
 .../views/insights/pages/ai/aiPageHeader.tsx  |  1 +
 .../pages/backend/backendPageHeader.tsx       |  1 +
 .../views/insights/pages/domainViewHeader.tsx | 34 +++++----
 .../pages/frontend/frontendOverviewPage.tsx   | 10 ++-
 .../pages/frontend/frontendPageHeader.tsx     | 28 +++++--
 .../pages/mobile/mobilePageHeader.tsx         |  1 +
 12 files changed, 141 insertions(+), 47 deletions(-)

diff --git a/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx b/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx
index a1da1c79853fab..36f2a2afc2496e 100644
--- a/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx
+++ b/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx
@@ -119,7 +119,17 @@ function ResourceSummary() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <FrontendHeader module={ModuleName.RESOURCE} />}
+      {isInDomainView && (
+        <FrontendHeader
+          headerTitle={spanMetrics[SpanMetricsField.SPAN_DESCRIPTION]}
+          breadcrumbs={[
+            {
+              label: tct('[dataType] Summary', {dataType: DATA_TYPE}),
+            },
+          ]}
+          module={ModuleName.RESOURCE}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>
diff --git a/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx b/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
index c77c09fb64d92d..6215c9d558a916 100644
--- a/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
+++ b/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
@@ -63,7 +63,9 @@ function ResourcesLandingPage() {
           </Layout.Header>
         )}
 
-        {isInDomainView && <FrontendHeader module={ModuleName.RESOURCE} />}
+        {isInDomainView && (
+          <FrontendHeader headerTitle={MODULE_TITLE} module={ModuleName.RESOURCE} />
+        )}
         <Layout.Body>
           <Layout.Main fullWidth>
             <PageAlert />
diff --git a/static/app/views/insights/browser/webVitals/views/pageOverview.tsx b/static/app/views/insights/browser/webVitals/views/pageOverview.tsx
index 145bc50979906b..b1a0711d9e5061 100644
--- a/static/app/views/insights/browser/webVitals/views/pageOverview.tsx
+++ b/static/app/views/insights/browser/webVitals/views/pageOverview.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useState} from 'react';
+import React, {Fragment, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
@@ -135,24 +135,23 @@ export function PageOverview() {
       ? undefined
       : calculatePerformanceScoreFromStoredTableDataRow(projectScores?.data?.[0]);
 
+  const handleTabChange = (value: string) => {
+    trackAnalytics('insight.vital.overview.toggle_tab', {
+      organization,
+      tab: value,
+    });
+    browserHistory.push({
+      ...location,
+      query: {
+        ...location.query,
+        tab: value,
+      },
+    });
+  };
+
   return (
     <React.Fragment>
-      <Tabs
-        value={tab}
-        onChange={value => {
-          trackAnalytics('insight.vital.overview.toggle_tab', {
-            organization,
-            tab: value,
-          });
-          browserHistory.push({
-            ...location,
-            query: {
-              ...location.query,
-              tab: value,
-            },
-          });
-        }}
-      >
+      <Tabs value={tab} onChange={handleTabChange}>
         {!isInDomainView && (
           <Layout.Header>
             <Layout.HeaderContent>
@@ -189,7 +188,45 @@ export function PageOverview() {
             </TabList>
           </Layout.Header>
         )}
-        {isInDomainView && <FrontendHeader module={ModuleName.VITAL} />}
+        {isInDomainView && (
+          <FrontendHeader
+            headerTitle={
+              <Fragment>
+                {transaction && project && <ProjectAvatar project={project} size={24} />}
+                {transaction ?? t('Page Loads')}
+              </Fragment>
+            }
+            headerActions={
+              transactionSummaryTarget && (
+                <LinkButton
+                  to={transactionSummaryTarget}
+                  onClick={() => {
+                    trackAnalytics('insight.vital.overview.open_transaction_summary', {
+                      organization,
+                    });
+                  }}
+                  size="sm"
+                >
+                  {t('View Transaction Summary')}
+                </LinkButton>
+              )
+            }
+            hideDefaultTabs
+            tabs={{
+              value: tab,
+              onTabChange: handleTabChange,
+              tabList: (
+                <TabList hideBorder>
+                  {LANDING_DISPLAYS.map(({label, field}) => (
+                    <TabList.Item key={field}>{label}</TabList.Item>
+                  ))}
+                </TabList>
+              ),
+            }}
+            breadcrumbs={transaction ? [{label: 'Page Summary'}] : []}
+            module={ModuleName.VITAL}
+          />
+        )}
         {tab === LandingDisplayField.SPANS ? (
           <Layout.Body>
             <Layout.Main fullWidth>
diff --git a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
index 39b52be040546e..4f1dd379f15ca1 100644
--- a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
+++ b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
@@ -95,7 +95,9 @@ export function WebVitalsLandingPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <FrontendHeader module={ModuleName.VITAL} />}
+      {isInDomainView && (
+        <FrontendHeader headerTitle={MODULE_TITLE} module={ModuleName.VITAL} />
+      )}
       <Layout.Body>
         <Layout.Main fullWidth>
           <TopMenuContainer>
diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx
index e9686b83b48b56..50432c0e420324 100644
--- a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx
+++ b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 
 import Alert from 'sentry/components/alert';
 import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
@@ -215,7 +215,21 @@ export function HTTPDomainSummaryPage() {
       )}
 
       {isInDomainView && view === FRONTEND_LANDING_SUB_PATH && (
-        <FrontendHeader module={ModuleName.HTTP} />
+        <FrontendHeader
+          headerTitle={
+            <Fragment>
+              {project && <ProjectAvatar project={project} size={36} />}
+              {domain || NULL_DOMAIN_DESCRIPTION}
+              <DomainStatusLink domain={domain} />
+            </Fragment>
+          }
+          breadcrumbs={[
+            {
+              label: 'Domain Summary',
+            },
+          ]}
+          module={ModuleName.HTTP}
+        />
       )}
 
       {isInDomainView && view === BACKEND_LANDING_SUB_PATH && (
diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx
index 7bc9af9a9fd77c..b1440fa32bd50c 100644
--- a/static/app/views/insights/http/views/httpLandingPage.tsx
+++ b/static/app/views/insights/http/views/httpLandingPage.tsx
@@ -188,7 +188,7 @@ export function HTTPLandingPage() {
       )}
 
       {isInDomainView && view === FRONTEND_LANDING_SUB_PATH && (
-        <FrontendHeader module={ModuleName.HTTP} />
+        <FrontendHeader headerTitle={MODULE_TITLE} module={ModuleName.HTTP} />
       )}
 
       {isInDomainView && view === BACKEND_LANDING_SUB_PATH && (
diff --git a/static/app/views/insights/pages/ai/aiPageHeader.tsx b/static/app/views/insights/pages/ai/aiPageHeader.tsx
index 094ccc3d499fae..f3e4bcace20732 100644
--- a/static/app/views/insights/pages/ai/aiPageHeader.tsx
+++ b/static/app/views/insights/pages/ai/aiPageHeader.tsx
@@ -27,6 +27,7 @@ export function AiHeader({module, headerActions}: Props) {
     <DomainViewHeader
       domainBaseUrl={aiBaseUrl}
       headerTitle={AI_LANDING_TITLE}
+      domainTitle={AI_LANDING_TITLE}
       modules={modules}
       selectedModule={module}
       additonalHeaderActions={headerActions}
diff --git a/static/app/views/insights/pages/backend/backendPageHeader.tsx b/static/app/views/insights/pages/backend/backendPageHeader.tsx
index 9b85bc8359e55a..9c14bd0f3a89e8 100644
--- a/static/app/views/insights/pages/backend/backendPageHeader.tsx
+++ b/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}
diff --git a/static/app/views/insights/pages/domainViewHeader.tsx b/static/app/views/insights/pages/domainViewHeader.tsx
index d2a24d96383494..dd345fa6756e54 100644
--- a/static/app/views/insights/pages/domainViewHeader.tsx
+++ b/static/app/views/insights/pages/domainViewHeader.tsx
@@ -15,8 +15,9 @@ 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';
 
-type Props = {
+export type Props = {
   domainBaseUrl: string;
+  domainTitle: string;
   headerTitle: React.ReactNode;
   modules: ModuleName[];
   selectedModule: ModuleName | undefined;
@@ -34,6 +35,7 @@ type Tab = {
 export function DomainViewHeader({
   modules,
   headerTitle,
+  domainTitle,
   selectedModule,
   hideDefaultTabs,
   additonalHeaderActions,
@@ -51,7 +53,7 @@ export function DomainViewHeader({
       preservePageFilters: true,
     },
     {
-      label: headerTitle,
+      label: domainTitle,
       to: domainBaseUrl,
       preservePageFilters: true,
     },
@@ -93,19 +95,19 @@ export function DomainViewHeader({
 
   return (
     <Fragment>
-      <Tabs value={tabValue} onChange={handleTabChange}>
-        <Layout.Header>
-          <Layout.HeaderContent>
-            <Breadcrumbs crumbs={baseCrumbs} />
+      <Layout.Header>
+        <Layout.HeaderContent>
+          <Breadcrumbs crumbs={baseCrumbs} />
 
-            <Layout.Title>{headerTitle}</Layout.Title>
-          </Layout.HeaderContent>
-          <Layout.HeaderActions>
-            <ButtonBar gap={1}>
-              {additonalHeaderActions}
-              <FeedbackWidgetButton />
-            </ButtonBar>
-          </Layout.HeaderActions>
+          <Layout.Title>{headerTitle}</Layout.Title>
+        </Layout.HeaderContent>
+        <Layout.HeaderActions>
+          <ButtonBar gap={1}>
+            {additonalHeaderActions}
+            <FeedbackWidgetButton />
+          </ButtonBar>
+        </Layout.HeaderActions>
+        <Tabs value={tabValue} onChange={handleTabChange}>
           {!hideDefaultTabs && (
             <TabList hideBorder>
               {tabList.map(tab => (
@@ -114,8 +116,8 @@ export function DomainViewHeader({
             </TabList>
           )}
           {hideDefaultTabs && tabs && tabs.tabList}
-        </Layout.Header>
-      </Tabs>
+        </Tabs>
+      </Layout.Header>
     </Fragment>
   );
 }
diff --git a/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx b/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
index 883c4c6fabb39a..561530516d13d5 100644
--- a/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
+++ b/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
@@ -25,7 +25,10 @@ import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {ViewTrendsButton} from 'sentry/views/insights/common/components/viewTrendsButton';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
-import {OVERVIEW_PAGE_ALLOWED_OPS} from 'sentry/views/insights/pages/frontend/settings';
+import {
+  FRONTEND_LANDING_TITLE,
+  OVERVIEW_PAGE_ALLOWED_OPS,
+} from 'sentry/views/insights/pages/frontend/settings';
 import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
 import {generateFrontendOtherPerformanceEventView} from 'sentry/views/performance/data';
 import {
@@ -148,7 +151,10 @@ function FrontendOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <FrontendHeader headerActions={<ViewTrendsButton />} />
+      <FrontendHeader
+        headerTitle={FRONTEND_LANDING_TITLE}
+        headerActions={<ViewTrendsButton />}
+      />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>
diff --git a/static/app/views/insights/pages/frontend/frontendPageHeader.tsx b/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
index 76db0b969afb5a..7ca1454a10e352 100644
--- a/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
+++ b/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
@@ -1,6 +1,9 @@
 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 {
   FRONTEND_LANDING_SUB_PATH,
   FRONTEND_LANDING_TITLE,
@@ -9,12 +12,23 @@ 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'];
+  hideDefaultTabs?: HeaderProps['hideDefaultTabs'];
+  module?: HeaderProps['selectedModule'];
+  tabs?: HeaderProps['tabs'];
 };
 
 // TODO - add props to append to breadcrumbs and change title
-export function FrontendHeader({module, headerActions}: Props) {
+export function FrontendHeader({
+  module,
+  headerActions,
+  headerTitle,
+  breadcrumbs,
+  tabs,
+  hideDefaultTabs,
+}: Props) {
   const {slug} = useOrganization();
 
   const frontendBaseUrl = normalizeUrl(
@@ -28,8 +42,12 @@ export function FrontendHeader({module, headerActions}: Props) {
       domainBaseUrl={frontendBaseUrl}
       modules={modules}
       selectedModule={module}
+      additionalBreadCrumbs={breadcrumbs}
       additonalHeaderActions={headerActions}
-      headerTitle={FRONTEND_LANDING_TITLE}
+      headerTitle={headerTitle}
+      tabs={tabs}
+      hideDefaultTabs={hideDefaultTabs}
+      domainTitle={FRONTEND_LANDING_TITLE}
     />
   );
 }
diff --git a/static/app/views/insights/pages/mobile/mobilePageHeader.tsx b/static/app/views/insights/pages/mobile/mobilePageHeader.tsx
index eab5ec3f61ccac..5cfcaa8657eef3 100644
--- a/static/app/views/insights/pages/mobile/mobilePageHeader.tsx
+++ b/static/app/views/insights/pages/mobile/mobilePageHeader.tsx
@@ -38,6 +38,7 @@ export function MobileHeader({
   return (
     <DomainViewHeader
       domainBaseUrl={mobileBaseUrl}
+      domainTitle={MOBILE_LANDING_TITLE}
       headerTitle={headerTitle || MOBILE_LANDING_TITLE}
       modules={modules}
       selectedModule={module}

From 5e22a5c19e17290dae5e15850feed670a0fb0ce1 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Thu, 10 Oct 2024 12:16:27 -0400
Subject: [PATCH 2/3] question mark in title

---
 .../resources/views/resourcesLandingPage.tsx      | 13 ++++++++++++-
 .../webVitals/views/webVitalsLandingPage.tsx      | 13 ++++++++++++-
 .../views/insights/http/views/httpLandingPage.tsx | 15 +++++++++++++--
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx b/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
index 6215c9d558a916..61dfc086c0b1b6 100644
--- a/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
+++ b/static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
@@ -64,7 +64,18 @@ function ResourcesLandingPage() {
         )}
 
         {isInDomainView && (
-          <FrontendHeader headerTitle={MODULE_TITLE} module={ModuleName.RESOURCE} />
+          <FrontendHeader
+            headerTitle={
+              <Fragment>
+                {MODULE_TITLE}
+                <PageHeadingQuestionTooltip
+                  docsUrl={MODULE_DOC_LINK}
+                  title={MODULE_DESCRIPTION}
+                />
+              </Fragment>
+            }
+            module={ModuleName.RESOURCE}
+          />
         )}
         <Layout.Body>
           <Layout.Main fullWidth>
diff --git a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
index 4f1dd379f15ca1..d048ad80fa9864 100644
--- a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
+++ b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
@@ -96,7 +96,18 @@ export function WebVitalsLandingPage() {
       )}
 
       {isInDomainView && (
-        <FrontendHeader headerTitle={MODULE_TITLE} module={ModuleName.VITAL} />
+        <FrontendHeader
+          headerTitle={
+            <Fragment>
+              {MODULE_TITLE}
+              <PageHeadingQuestionTooltip
+                docsUrl={MODULE_DOC_LINK}
+                title={MODULE_DESCRIPTION}
+              />
+            </Fragment>
+          }
+          module={ModuleName.VITAL}
+        />
       )}
       <Layout.Body>
         <Layout.Main fullWidth>
diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx
index b1440fa32bd50c..31629150bcf6c4 100644
--- a/static/app/views/insights/http/views/httpLandingPage.tsx
+++ b/static/app/views/insights/http/views/httpLandingPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import ButtonBar from 'sentry/components/buttonBar';
@@ -188,7 +188,18 @@ export function HTTPLandingPage() {
       )}
 
       {isInDomainView && view === FRONTEND_LANDING_SUB_PATH && (
-        <FrontendHeader headerTitle={MODULE_TITLE} module={ModuleName.HTTP} />
+        <FrontendHeader
+          headerTitle={
+            <Fragment>
+              {MODULE_TITLE}
+              <PageHeadingQuestionTooltip
+                docsUrl={MODULE_DOC_LINK}
+                title={MODULE_DESCRIPTION}
+              />
+            </Fragment>
+          }
+          module={ModuleName.HTTP}
+        />
       )}
 
       {isInDomainView && view === BACKEND_LANDING_SUB_PATH && (

From 1c358c6b88ee3df5b2d1729be9a72a28dacf5cb2 Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Fri, 18 Oct 2024 16:17:18 -0400
Subject: [PATCH 3/3] fix lint

---
 static/app/views/insights/pages/frontend/frontendPageHeader.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/app/views/insights/pages/frontend/frontendPageHeader.tsx b/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
index 97f501a1cc5993..883f7f86d1bdba 100644
--- a/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
+++ b/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
@@ -48,7 +48,6 @@ export function FrontendHeader({
       headerTitle={headerTitle}
       tabs={tabs}
       hideDefaultTabs={hideDefaultTabs}
-      domainTitle={FRONTEND_LANDING_TITLE}
     />
   );
 }