From 4adebbe68fa43c8aa44bf369c3194e94ead2ee38 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Thu, 10 Oct 2024 13:32:08 -0400 Subject: [PATCH 1/3] update header/breadcrumbs mobile and ai --- .../views/llmMonitoringDetailsPage.tsx | 17 +++++++++++++- .../views/llmMonitoringLandingPage.tsx | 15 ++++++++++++- .../screens/views/screensLandingPage.tsx | 18 +++++++++++++-- .../insights/pages/ai/aiOverviewPage.tsx | 3 ++- .../views/insights/pages/ai/aiPageHeader.tsx | 17 +++++++++----- .../views/insights/pages/domainViewHeader.tsx | 6 +++-- .../pages/mobile/mobileOverviewPage.tsx | 6 ++++- .../pages/mobile/mobilePageHeader.tsx | 22 ++++++++++--------- 8 files changed, 81 insertions(+), 23 deletions(-) diff --git a/static/app/views/insights/llmMonitoring/views/llmMonitoringDetailsPage.tsx b/static/app/views/insights/llmMonitoring/views/llmMonitoringDetailsPage.tsx index ae6071da2d9a92..b4e5b87da53bd6 100644 --- a/static/app/views/insights/llmMonitoring/views/llmMonitoringDetailsPage.tsx +++ b/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 && ( - + + {spanDescription} + + + } + breadcrumbs={[ + { + label: t('Pipeline Summary'), + }, + ]} + module={ModuleName.AI} + /> )} diff --git a/static/app/views/insights/llmMonitoring/views/llmMonitoringLandingPage.tsx b/static/app/views/insights/llmMonitoring/views/llmMonitoringLandingPage.tsx index 1951d97653f000..f91c5d2e7ad84f 100644 --- a/static/app/views/insights/llmMonitoring/views/llmMonitoringLandingPage.tsx +++ b/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 && ( - + + {MODULE_TITLE} + + + } + module={ModuleName.AI} + /> )} diff --git a/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx b/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx index cd0dc9e594aac6..c4353014a7b836 100644 --- a/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx +++ b/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() { )} - {isInDomainView && } + {isInDomainView && ( + + {MODULE_TITLE} + + + } + headerActions={isProjectCrossPlatform && } + module={ModuleName.MOBILE_SCREENS} + /> + )} diff --git a/static/app/views/insights/pages/ai/aiOverviewPage.tsx b/static/app/views/insights/pages/ai/aiOverviewPage.tsx index e18ea160f3557d..aa517302178c1e 100644 --- a/static/app/views/insights/pages/ai/aiOverviewPage.tsx +++ b/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} > - + diff --git a/static/app/views/insights/pages/ai/aiPageHeader.tsx b/static/app/views/insights/pages/ai/aiPageHeader.tsx index 094ccc3d499fae..89fe16ac060ee0 100644 --- a/static/app/views/insights/pages/ai/aiPageHeader.tsx +++ b/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 ( ); } diff --git a/static/app/views/insights/pages/domainViewHeader.tsx b/static/app/views/insights/pages/domainViewHeader.tsx index d2a24d96383494..d7e7172c3313bd 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, }, diff --git a/static/app/views/insights/pages/mobile/mobileOverviewPage.tsx b/static/app/views/insights/pages/mobile/mobileOverviewPage.tsx index bee1959a6e20a3..3a60c01d968e03 100644 --- a/static/app/views/insights/pages/mobile/mobileOverviewPage.tsx +++ b/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} > - } /> + } + /> diff --git a/static/app/views/insights/pages/mobile/mobilePageHeader.tsx b/static/app/views/insights/pages/mobile/mobilePageHeader.tsx index eab5ec3f61ccac..41a6358fb8257b 100644 --- a/static/app/views/insights/pages/mobile/mobilePageHeader.tsx +++ b/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, @@ -10,15 +12,14 @@ import {DOMAIN_VIEW_BASE_URL} from 'sentry/views/insights/pages/settings'; 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, @@ -38,7 +39,8 @@ export function MobileHeader({ return ( Date: Tue, 15 Oct 2024 15:46:12 -0400 Subject: [PATCH 2/3] fix test --- .../insights/mobile/screens/views/screensLandingPage.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/insights/mobile/screens/views/screensLandingPage.spec.tsx b/static/app/views/insights/mobile/screens/views/screensLandingPage.spec.tsx index cdf079c6b19269..3ac21d5fa72690 100644 --- a/static/app/views/insights/mobile/screens/views/screensLandingPage.spec.tsx +++ b/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, }, From 68e97f6129c9afa45f9c817042b95c93d418ec31 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Tue, 15 Oct 2024 16:14:03 -0400 Subject: [PATCH 3/3] update fail build --- static/app/views/insights/pages/backend/backendPageHeader.tsx | 1 + static/app/views/insights/pages/frontend/frontendPageHeader.tsx | 1 + 2 files changed, 2 insertions(+) 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 (