diff --git a/static/app/routes.tsx b/static/app/routes.tsx index d3e901b88155b5..b0974c5220d3b4 100644 --- a/static/app/routes.tsx +++ b/static/app/routes.tsx @@ -1927,6 +1927,7 @@ function buildRoutes(): RouteObject[] { children: [ { index: true, + handle: {module: ModuleName.DB}, component: make( () => import('sentry/views/insights/database/views/databaseLandingPage') ), @@ -1944,6 +1945,7 @@ function buildRoutes(): RouteObject[] { children: [ { index: true, + handle: {module: ModuleName.CACHE}, component: make( () => import('sentry/views/insights/cache/views/cacheLandingPage') ), @@ -1955,6 +1957,7 @@ function buildRoutes(): RouteObject[] { children: [ { index: true, + handle: {module: ModuleName.QUEUE}, component: make( () => import('sentry/views/insights/queues/views/queuesLandingPage') ), @@ -2044,9 +2047,11 @@ function buildRoutes(): RouteObject[] { }, { path: `${BACKEND_LANDING_SUB_PATH}/`, + component: make(() => import('sentry/views/insights/pages/backend/layout')), children: [ { index: true, + handle: {module: undefined}, component: make( () => import('sentry/views/insights/pages/backend/backendOverviewPage') ), diff --git a/static/app/views/insights/cache/views/cacheLandingPage.tsx b/static/app/views/insights/cache/views/cacheLandingPage.tsx index 03341672c99777..8ed9932a5eab1e 100644 --- a/static/app/views/insights/cache/views/cacheLandingPage.tsx +++ b/static/app/views/insights/cache/views/cacheLandingPage.tsx @@ -24,7 +24,6 @@ import {useSpans} from 'sentry/views/insights/common/queries/useDiscover'; import {combineMeta} from 'sentry/views/insights/common/utils/combineMeta'; import {useSamplesDrawer} from 'sentry/views/insights/common/utils/useSamplesDrawer'; import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters'; -import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; import {ModuleName, SpanFields, SpanFunction} from 'sentry/views/insights/types'; const {CACHE_MISS_RATE} = SpanFunction; @@ -100,8 +99,6 @@ export function CacheLandingPage() { return ( - - diff --git a/static/app/views/insights/database/views/databaseLandingPage.tsx b/static/app/views/insights/database/views/databaseLandingPage.tsx index d36e4f344394e0..320156a82e9633 100644 --- a/static/app/views/insights/database/views/databaseLandingPage.tsx +++ b/static/app/views/insights/database/views/databaseLandingPage.tsx @@ -32,7 +32,6 @@ import { } from 'sentry/views/insights/database/components/tables/queriesTable'; import {useSystemSelectorOptions} from 'sentry/views/insights/database/components/useSystemSelectorOptions'; import {BASE_FILTERS} from 'sentry/views/insights/database/settings'; -import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; import {ModuleName, SpanFields} from 'sentry/views/insights/types'; export function DatabaseLandingPage() { @@ -126,7 +125,6 @@ export function DatabaseLandingPage() { return ( - diff --git a/static/app/views/insights/http/views/httpLandingPage.spec.tsx b/static/app/views/insights/http/views/httpLandingPage.spec.tsx index 127301ad0ab11a..3ed256f2ed674a 100644 --- a/static/app/views/insights/http/views/httpLandingPage.spec.tsx +++ b/static/app/views/insights/http/views/httpLandingPage.spec.tsx @@ -367,11 +367,6 @@ describe('HTTPLandingPage', () => { await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator')); - expect(screen.getByRole('heading', {level: 1})).toHaveTextContent('Backend'); - const tab = screen.getByRole('tab', {name: 'Outbound API Requests'}); - expect(tab).toBeInTheDocument(); - expect(tab).toHaveAttribute('aria-selected', 'true'); - expect(screen.getByRole('table', {name: 'Domains'})).toBeInTheDocument(); expect(screen.getByRole('columnheader', {name: 'Domain'})).toBeInTheDocument(); diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx index a26e9e47914cfe..759ec042386331 100644 --- a/static/app/views/insights/http/views/httpLandingPage.tsx +++ b/static/app/views/insights/http/views/httpLandingPage.tsx @@ -28,8 +28,6 @@ import { isAValidSort, } from 'sentry/views/insights/http/components/tables/domainsTable'; import {Referrer} from 'sentry/views/insights/http/referrers'; -import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; -import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings'; import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader'; import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings'; import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters'; @@ -103,7 +101,6 @@ export function HTTPLandingPage() { return ( - {view === BACKEND_LANDING_SUB_PATH && } {view === MOBILE_LANDING_SUB_PATH && } diff --git a/static/app/views/insights/pages/backend/am1BackendOverviewPage.tsx b/static/app/views/insights/pages/backend/am1BackendOverviewPage.tsx index 240b3cac4595f4..c22c7e0378b022 100644 --- a/static/app/views/insights/pages/backend/am1BackendOverviewPage.tsx +++ b/static/app/views/insights/pages/backend/am1BackendOverviewPage.tsx @@ -32,11 +32,7 @@ import {useUserTeams} from 'sentry/utils/useUserTeams'; import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout'; import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon'; import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject'; -import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; -import { - BACKEND_LANDING_TITLE, - OVERVIEW_PAGE_ALLOWED_OPS, -} from 'sentry/views/insights/pages/backend/settings'; +import {OVERVIEW_PAGE_ALLOWED_OPS} from 'sentry/views/insights/pages/backend/settings'; import { OVERVIEW_PAGE_ALLOWED_OPS as FRONTEND_OVERVIEW_PAGE_OPS, FRONTEND_PLATFORMS, @@ -229,7 +225,6 @@ export function Am1BackendOverviewPage() { organization={organization} renderDisabled={NoAccess} > - diff --git a/static/app/views/insights/pages/backend/backendOverviewPage.spec.tsx b/static/app/views/insights/pages/backend/backendOverviewPage.spec.tsx index de7cda31059cf7..b7cc2d4a8907c2 100644 --- a/static/app/views/insights/pages/backend/backendOverviewPage.spec.tsx +++ b/static/app/views/insights/pages/backend/backendOverviewPage.spec.tsx @@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization'; import {PageFiltersFixture, PageFilterStateFixture} from 'sentry-fixture/pageFilters'; import {ProjectFixture} from 'sentry-fixture/project'; -import {render, screen} from 'sentry-test/reactTestingLibrary'; +import {render, waitFor} from 'sentry-test/reactTestingLibrary'; import ProjectsStore from 'sentry/stores/projectsStore'; import {useLocation} from 'sentry/utils/useLocation'; @@ -55,15 +55,16 @@ describe('BackendOverviewPage', () => { }); render(, {organization}); - expect(await screen.findByRole('heading', {level: 1})).toHaveTextContent('Backend'); - expect(mainTableApiCall).toHaveBeenCalledWith( - '/organizations/org-slug/events/', - expect.objectContaining({ - query: expect.objectContaining({ - query: - 'transaction:transaction-name ( ( !transaction.op:pageload !transaction.op:navigation !transaction.op:ui.render !transaction.op:interaction !transaction.op:ui.action.swipe !transaction.op:ui.action.scroll !transaction.op:ui.action.click !transaction.op:ui.action !transaction.op:ui.load !transaction.op:app.lifecycle !project.id:[1] ) OR ( transaction.op:http.server ) ) event.type:transaction', - }), - }) + await waitFor(() => + expect(mainTableApiCall).toHaveBeenCalledWith( + '/organizations/org-slug/events/', + expect.objectContaining({ + query: expect.objectContaining({ + query: + 'transaction:transaction-name ( ( !transaction.op:pageload !transaction.op:navigation !transaction.op:ui.render !transaction.op:interaction !transaction.op:ui.action.swipe !transaction.op:ui.action.scroll !transaction.op:ui.action.click !transaction.op:ui.action !transaction.op:ui.load !transaction.op:app.lifecycle !project.id:[1] ) OR ( transaction.op:http.server ) ) event.type:transaction', + }), + }) + ) ); }); }); diff --git a/static/app/views/insights/pages/backend/backendOverviewPage.tsx b/static/app/views/insights/pages/backend/backendOverviewPage.tsx index 02ae60f4ca2215..6bef7b104ecc19 100644 --- a/static/app/views/insights/pages/backend/backendOverviewPage.tsx +++ b/static/app/views/insights/pages/backend/backendOverviewPage.tsx @@ -34,7 +34,6 @@ import {useDefaultToAllProjects} from 'sentry/views/insights/common/utils/useDef import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap'; import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters'; import {Am1BackendOverviewPage} from 'sentry/views/insights/pages/backend/am1BackendOverviewPage'; -import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; import { BackendOverviewTable, isAValidSort, @@ -42,7 +41,6 @@ import { } from 'sentry/views/insights/pages/backend/backendTable'; import {Referrer} from 'sentry/views/insights/pages/backend/referrers'; import { - BACKEND_LANDING_TITLE, DEFAULT_SORT, OVERVIEW_PAGE_ALLOWED_OPS, } from 'sentry/views/insights/pages/backend/settings'; @@ -72,7 +70,7 @@ function BackendOverviewPage() { return ; } if (isNextJsPageEnabled) { - return ; + return ; } if (isNewBackendExperienceEnabled) { return ; @@ -203,7 +201,6 @@ function EAPBackendOverviewPage() { organization={organization} renderDisabled={NoAccess} > - diff --git a/static/app/views/insights/pages/backend/layout.tsx b/static/app/views/insights/pages/backend/layout.tsx new file mode 100644 index 00000000000000..cd07eac0b0b358 --- /dev/null +++ b/static/app/views/insights/pages/backend/layout.tsx @@ -0,0 +1,18 @@ +import {Fragment} from 'react'; +import {Outlet, useMatches} from 'react-router-dom'; + +import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; +import {ModuleName} from 'sentry/views/insights/types'; + +function BackendLayout() { + const handle = useMatches().at(-1)?.handle as {module?: ModuleName} | undefined; + + return ( + + {handle && 'module' in handle ? : null} + + + ); +} + +export default BackendLayout; diff --git a/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx b/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx index e31db64a1fe8b9..a1ff1d5a911bf0 100644 --- a/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx +++ b/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx @@ -236,7 +236,7 @@ function FrontendOverviewPageWithProviders() { let overviewPage = ; if (isNextJsPageEnabled) { - overviewPage = ; + overviewPage = ; } else if (useEap) { overviewPage = ; } diff --git a/static/app/views/insights/pages/platform/laravel/index.tsx b/static/app/views/insights/pages/platform/laravel/index.tsx index 968d0b05563e3d..7014ad758cf352 100644 --- a/static/app/views/insights/pages/platform/laravel/index.tsx +++ b/static/app/views/insights/pages/platform/laravel/index.tsx @@ -83,7 +83,7 @@ export function LaravelOverviewPage() { } return ( - + diff --git a/static/app/views/insights/pages/platform/nextjs/index.tsx b/static/app/views/insights/pages/platform/nextjs/index.tsx index 6b8707358f31c9..68c8f57dba8b6b 100644 --- a/static/app/views/insights/pages/platform/nextjs/index.tsx +++ b/static/app/views/insights/pages/platform/nextjs/index.tsx @@ -33,11 +33,7 @@ function isTableType(value: any): value is TableType { const TableControl = SegmentedControl; const TableControlItem = SegmentedControl.Item; -export function NextJsOverviewPage({ - performanceType, -}: { - performanceType: 'backend' | 'frontend'; -}) { +export function NextJsOverviewPage() { const organization = useOrganization(); const location = useLocation(); const navigate = useNavigate(); @@ -89,7 +85,7 @@ export function NextJsOverviewPage({ ); return ( - + diff --git a/static/app/views/insights/pages/platform/shared/layout.tsx b/static/app/views/insights/pages/platform/shared/layout.tsx index 6fb0af5acba65d..57568ceda71b41 100644 --- a/static/app/views/insights/pages/platform/shared/layout.tsx +++ b/static/app/views/insights/pages/platform/shared/layout.tsx @@ -14,8 +14,6 @@ import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLay import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector'; import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon'; import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject'; -import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; -import {BACKEND_LANDING_TITLE} from 'sentry/views/insights/pages/backend/settings'; import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery'; import {LegacyOnboarding} from 'sentry/views/performance/onboarding'; import {getTransactionSearchQuery} from 'sentry/views/performance/utils'; @@ -34,13 +32,7 @@ function getFreeTextFromQuery(query: string) { return ''; } -export function PlatformLandingPageLayout({ - children, - performanceType, -}: { - children: React.ReactNode; - performanceType: 'backend' | 'frontend'; -}) { +export function PlatformLandingPageLayout({children}: {children: React.ReactNode}) { const location = useLocation(); const organization = useOrganization(); const onboardingProject = useOnboardingProject(); @@ -56,9 +48,6 @@ export function PlatformLandingPageLayout({ organization={organization} renderDisabled={NoAccess} > - {performanceType === 'backend' ? ( - - ) : null} diff --git a/static/app/views/insights/queues/views/queuesLandingPage.tsx b/static/app/views/insights/queues/views/queuesLandingPage.tsx index 68bd67c5585e73..26f8ecc46eca4a 100644 --- a/static/app/views/insights/queues/views/queuesLandingPage.tsx +++ b/static/app/views/insights/queues/views/queuesLandingPage.tsx @@ -20,7 +20,6 @@ import {ModulesOnboarding} from 'sentry/views/insights/common/components/modules import QueuesLandingLatencyChartWidget from 'sentry/views/insights/common/components/widgets/queuesLandingLatencyChartWidget'; import QueuesLandingThroughputChartWidget from 'sentry/views/insights/common/components/widgets/queuesLandingThroughputChartWidget'; import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters'; -import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; import { isAValidSort, QueuesTable, @@ -72,8 +71,6 @@ function QueuesLandingPage() { return ( - -