From cc19d38ec5114f0e18ce4848951209e4dc0ba48a Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Thu, 10 Oct 2024 13:19:10 -0400
Subject: [PATCH 1/2] update backend headers

---
 .../insights/cache/views/cacheLandingPage.tsx | 15 ++++++++++++-
 .../database/views/databaseLandingPage.tsx    | 15 ++++++++++++-
 .../views/databaseSpanSummaryPage.tsx         | 14 ++++++++++--
 .../http/views/httpDomainSummaryPage.tsx      | 22 ++++++++++++++++---
 .../insights/http/views/httpLandingPage.tsx   | 19 ++++++++--------
 .../pages/backend/backendOverviewPage.tsx     |  6 ++++-
 .../pages/backend/backendPageHeader.tsx       | 19 +++++++++-------
 .../views/insights/pages/domainViewHeader.tsx |  2 +-
 .../queues/views/destinationSummaryPage.tsx   | 12 +++++++++-
 .../queues/views/queuesLandingPage.tsx        | 15 ++++++++++++-
 10 files changed, 111 insertions(+), 28 deletions(-)

diff --git a/static/app/views/insights/cache/views/cacheLandingPage.tsx b/static/app/views/insights/cache/views/cacheLandingPage.tsx
index 366af93e0aec42..fd2ada7568f9e3 100644
--- a/static/app/views/insights/cache/views/cacheLandingPage.tsx
+++ b/static/app/views/insights/cache/views/cacheLandingPage.tsx
@@ -205,7 +205,20 @@ export function CacheLandingPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.CACHE} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={
+            <Fragment>
+              {MODULE_TITLE}
+              <PageHeadingQuestionTooltip
+                docsUrl={MODULE_DOC_LINK}
+                title={MODULE_DESCRIPTION}
+              />
+            </Fragment>
+          }
+          module={ModuleName.CACHE}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>
diff --git a/static/app/views/insights/database/views/databaseLandingPage.tsx b/static/app/views/insights/database/views/databaseLandingPage.tsx
index 1cb6dba3b94ec0..130639a2c4216e 100644
--- a/static/app/views/insights/database/views/databaseLandingPage.tsx
+++ b/static/app/views/insights/database/views/databaseLandingPage.tsx
@@ -186,7 +186,20 @@ export function DatabaseLandingPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.DB} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={
+            <React.Fragment>
+              {MODULE_TITLE}
+              <PageHeadingQuestionTooltip
+                docsUrl={MODULE_DOC_LINK}
+                title={MODULE_DESCRIPTION}
+              />
+            </React.Fragment>
+          }
+          module={ModuleName.DB}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>
diff --git a/static/app/views/insights/database/views/databaseSpanSummaryPage.tsx b/static/app/views/insights/database/views/databaseSpanSummaryPage.tsx
index 48911dd0bc6e4d..8a07f9f7e7d845 100644
--- a/static/app/views/insights/database/views/databaseSpanSummaryPage.tsx
+++ b/static/app/views/insights/database/views/databaseSpanSummaryPage.tsx
@@ -193,7 +193,7 @@ export function DatabaseSpanSummaryPage({params}: Props) {
               crumbs={[
                 ...crumbs,
                 {
-                  label: 'Query Summary',
+                  label: t('Query Summary'),
                 },
               ]}
             />
@@ -207,7 +207,17 @@ export function DatabaseSpanSummaryPage({params}: Props) {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.DB} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={t('Query Summary')}
+          breadcrumbs={[
+            {
+              label: t('Query Summary'),
+            },
+          ]}
+          module={ModuleName.DB}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>
diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx
index e9686b83b48b56..0ec3625062f1d1 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';
@@ -187,6 +187,14 @@ export function HTTPDomainSummaryPage() {
 
   const crumbs = useModuleBreadcrumbs('http');
 
+  const headerTitle = (
+    <Fragment>
+      {project && <ProjectAvatar project={project} size={36} />}
+      {domain || NULL_DOMAIN_DESCRIPTION}
+      <DomainStatusLink domain={domain} />
+    </Fragment>
+  );
+
   return (
     <React.Fragment>
       {!isInDomainView && (
@@ -196,7 +204,7 @@ export function HTTPDomainSummaryPage() {
               crumbs={[
                 ...crumbs,
                 {
-                  label: 'Domain Summary',
+                  label: t('Domain Summary'),
                 },
               ]}
             />
@@ -219,7 +227,15 @@ export function HTTPDomainSummaryPage() {
       )}
 
       {isInDomainView && view === BACKEND_LANDING_SUB_PATH && (
-        <BackendHeader module={ModuleName.HTTP} />
+        <BackendHeader
+          headerTitle={headerTitle}
+          module={ModuleName.HTTP}
+          breadcrumbs={[
+            {
+              label: t('Domain Summary'),
+            },
+          ]}
+        />
       )}
 
       <Layout.Body>
diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx
index 7bc9af9a9fd77c..0cae128f8a90e0 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';
@@ -164,6 +164,13 @@ export function HTTPLandingPage() {
 
   const crumbs = useModuleBreadcrumbs('http');
 
+  const headerTitle = (
+    <Fragment>
+      {MODULE_TITLE}
+      <PageHeadingQuestionTooltip docsUrl={MODULE_DOC_LINK} title={MODULE_DESCRIPTION} />
+    </Fragment>
+  );
+
   return (
     <React.Fragment>
       {!isInDomainView && (
@@ -171,13 +178,7 @@ export function HTTPLandingPage() {
           <Layout.HeaderContent>
             <Breadcrumbs crumbs={crumbs} />
 
-            <Layout.Title>
-              {MODULE_TITLE}
-              <PageHeadingQuestionTooltip
-                docsUrl={MODULE_DOC_LINK}
-                title={MODULE_DESCRIPTION}
-              />
-            </Layout.Title>
+            <Layout.Title>{headerTitle}</Layout.Title>
           </Layout.HeaderContent>
           <Layout.HeaderActions>
             <ButtonBar gap={1}>
@@ -192,7 +193,7 @@ export function HTTPLandingPage() {
       )}
 
       {isInDomainView && view === BACKEND_LANDING_SUB_PATH && (
-        <BackendHeader module={ModuleName.HTTP} />
+        <BackendHeader headerTitle={headerTitle} module={ModuleName.HTTP} />
       )}
 
       <Layout.Body>
diff --git a/static/app/views/insights/pages/backend/backendOverviewPage.tsx b/static/app/views/insights/pages/backend/backendOverviewPage.tsx
index 3ab775bfe0601d..69f3625ff343a6 100644
--- a/static/app/views/insights/pages/backend/backendOverviewPage.tsx
+++ b/static/app/views/insights/pages/backend/backendOverviewPage.tsx
@@ -25,6 +25,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 {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
+import {BACKEND_LANDING_TITLE} from 'sentry/views/insights/pages/backend/settings';
 import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
 import {generateBackendPerformanceEventView} from 'sentry/views/performance/data';
 import {
@@ -148,7 +149,10 @@ function BackendOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <BackendHeader headerActions={<ViewTrendsButton />} />
+      <BackendHeader
+        headerTitle={BACKEND_LANDING_TITLE}
+        headerActions={<ViewTrendsButton />}
+      />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>
diff --git a/static/app/views/insights/pages/backend/backendPageHeader.tsx b/static/app/views/insights/pages/backend/backendPageHeader.tsx
index 9b85bc8359e55a..c43456e658455c 100644
--- a/static/app/views/insights/pages/backend/backendPageHeader.tsx
+++ b/static/app/views/insights/pages/backend/backendPageHeader.tsx
@@ -1,20 +1,22 @@
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import useOrganization from 'sentry/utils/useOrganization';
+import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings';
 import {
-  BACKEND_LANDING_SUB_PATH,
-  BACKEND_LANDING_TITLE,
-} from 'sentry/views/insights/pages/backend/settings';
-import {DomainViewHeader} from 'sentry/views/insights/pages/domainViewHeader';
+  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 BackendHeader({module, headerActions}: Props) {
+export function BackendHeader({module, headerActions, headerTitle, breadcrumbs}: Props) {
   const {slug} = useOrganization();
 
   const backendBaseUrl = normalizeUrl(
@@ -25,10 +27,11 @@ export function BackendHeader({module, headerActions}: Props) {
   return (
     <DomainViewHeader
       domainBaseUrl={backendBaseUrl}
-      headerTitle={BACKEND_LANDING_TITLE}
+      headerTitle={headerTitle}
       additonalHeaderActions={headerActions}
       modules={modules}
       selectedModule={module}
+      additionalBreadCrumbs={breadcrumbs}
     />
   );
 }
diff --git a/static/app/views/insights/pages/domainViewHeader.tsx b/static/app/views/insights/pages/domainViewHeader.tsx
index d2a24d96383494..f4997b9a8ee6ea 100644
--- a/static/app/views/insights/pages/domainViewHeader.tsx
+++ b/static/app/views/insights/pages/domainViewHeader.tsx
@@ -15,7 +15,7 @@ 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;
   headerTitle: React.ReactNode;
   modules: ModuleName[];
diff --git a/static/app/views/insights/queues/views/destinationSummaryPage.tsx b/static/app/views/insights/queues/views/destinationSummaryPage.tsx
index 18bd0dbe8454fe..e272e2ebb0a78e 100644
--- a/static/app/views/insights/queues/views/destinationSummaryPage.tsx
+++ b/static/app/views/insights/queues/views/destinationSummaryPage.tsx
@@ -75,7 +75,17 @@ function DestinationSummaryPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.QUEUE} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={destination}
+          breadcrumbs={[
+            {
+              label: DESTINATION_TITLE,
+            },
+          ]}
+          module={ModuleName.QUEUE}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>
diff --git a/static/app/views/insights/queues/views/queuesLandingPage.tsx b/static/app/views/insights/queues/views/queuesLandingPage.tsx
index 790c82ffa36915..21902f5c93bf5d 100644
--- a/static/app/views/insights/queues/views/queuesLandingPage.tsx
+++ b/static/app/views/insights/queues/views/queuesLandingPage.tsx
@@ -107,7 +107,20 @@ function QueuesLandingPage() {
         </Layout.Header>
       )}
 
-      {isInDomainView && <BackendHeader module={ModuleName.QUEUE} />}
+      {isInDomainView && (
+        <BackendHeader
+          headerTitle={
+            <Fragment>
+              {MODULE_TITLE}
+              <PageHeadingQuestionTooltip
+                docsUrl={MODULE_DOC_LINK}
+                title={MODULE_DESCRIPTION}
+              />
+            </Fragment>
+          }
+          module={ModuleName.QUEUE}
+        />
+      )}
 
       <Layout.Body>
         <Layout.Main fullWidth>

From b8ec41d4139bfbbb276838ec38f8f3b087f349de Mon Sep 17 00:00:00 2001
From: Dominik Buszowiecki <DominikB2014@gmail.com>
Date: Thu, 10 Oct 2024 13:37:02 -0400
Subject: [PATCH 2/2] update domain title

---
 .../app/views/insights/pages/backend/backendPageHeader.tsx  | 6 +++++-
 static/app/views/insights/pages/domainViewHeader.tsx        | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/static/app/views/insights/pages/backend/backendPageHeader.tsx b/static/app/views/insights/pages/backend/backendPageHeader.tsx
index c43456e658455c..1ff51eadc7781f 100644
--- a/static/app/views/insights/pages/backend/backendPageHeader.tsx
+++ b/static/app/views/insights/pages/backend/backendPageHeader.tsx
@@ -1,6 +1,9 @@
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import useOrganization from 'sentry/utils/useOrganization';
-import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings';
+import {
+  BACKEND_LANDING_SUB_PATH,
+  BACKEND_LANDING_TITLE,
+} from 'sentry/views/insights/pages/backend/settings';
 import {
   DomainViewHeader,
   type Props as HeaderProps,
@@ -27,6 +30,7 @@ export function BackendHeader({module, headerActions, headerTitle, breadcrumbs}:
   return (
     <DomainViewHeader
       domainBaseUrl={backendBaseUrl}
+      domainTitle={BACKEND_LANDING_TITLE}
       headerTitle={headerTitle}
       additonalHeaderActions={headerActions}
       modules={modules}
diff --git a/static/app/views/insights/pages/domainViewHeader.tsx b/static/app/views/insights/pages/domainViewHeader.tsx
index f4997b9a8ee6ea..d7e7172c3313bd 100644
--- a/static/app/views/insights/pages/domainViewHeader.tsx
+++ b/static/app/views/insights/pages/domainViewHeader.tsx
@@ -17,6 +17,7 @@ import type {ModuleName} from 'sentry/views/insights/types';
 
 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,
     },