fix(trace-waterfall): Updating banner rendering logic (#97699)

This PR: 
- pushes the errors only banners above the waterfall tabs
- removes redundant component: TraceTypeWarnings
- prevents displaying tracing setup banner when we don't support the
enhanced checklist
- prevents showing the banners in issue details - trace preview

---------

Co-authored-by: Abdullah Khan <[email protected]>

Author: 2 people

static/app/views/performance/newTraceDetails/index.tsx

@@ -35,6 +35,7 @@ import {
   getInitialTracePreferences,
 } from './traceState/tracePreferences';
 import {TraceStateProvider} from './traceState/traceStateProvider';
+import {ErrorsOnlyWarnings} from './traceTypeWarnings/errorsOnlyWarnings';
 import {TraceMetaDataHeader} from './traceHeader';
 import {useTraceEventView} from './useTraceEventView';
 import {useTraceQueryParams} from './useTraceQueryParams';
@@ -142,6 +143,11 @@ function TraceViewImpl({traceSlug}: {traceSlug: string}) {
             logs={logsData}
           />
           <TraceInnerLayout ref={traceInnerLayoutRef}>
+            <ErrorsOnlyWarnings
+              tree={tree}
+              traceSlug={traceSlug}
+              organization={organization}
+            />
             <TraceTabsAndVitals
               tabsConfig={{
                 tabOptions,

static/app/views/performance/newTraceDetails/issuesTraceWaterfall.tsx

@@ -42,7 +42,6 @@ import {
   traceNodeAdjacentAnalyticsProperties,
   traceNodeAnalyticsName,
 } from './traceTreeAnalytics';
-import TraceTypeWarnings from './traceTypeWarnings';
 import type {TraceWaterfallProps} from './traceWaterfall';
 import {TraceGrid} from './traceWaterfall';
 import {TraceWaterfallState} from './traceWaterfallState';
@@ -353,11 +352,6 @@ export function IssuesTraceWaterfall(props: IssuesTraceWaterfallProps) {
 
   return (
     <Fragment>
-      <TraceTypeWarnings
-        tree={props.tree}
-        traceSlug={props.traceSlug}
-        organization={organization}
-      />
       <IssuesTraceGrid
         layout={traceState.preferences.layout}
         rowCount={

static/app/views/performance/newTraceDetails/traceTypeWarnings/errorsOnlyWarnings.tsx

@@ -2,8 +2,6 @@ import {useEffect, useMemo} from 'react';
 
 import emptyTraceImg from 'sentry-images/spot/performance-empty-trace.svg';
 
-import {Alert} from 'sentry/components/core/alert';
-import {ExternalLink} from 'sentry/components/core/link';
 import {SidebarPanelKey} from 'sentry/components/sidebar/types';
 import {withPerformanceOnboarding} from 'sentry/data/platformCategories';
 import {t, tct} from 'sentry/locale';
@@ -61,7 +59,9 @@ function PerformanceSetupBanner({
 }: PerformanceSetupBannerProps) {
   const location = useLocation();
   const LOCAL_STORAGE_KEY = `${traceSlug}:performance-orphan-error-onboarding-banner-hide`;
-  const hideBanner = projectsWithNoPerformance.length === 0;
+  const hideBanner =
+    projectsWithNoPerformance.length === 0 ||
+    projectsWithOnboardingChecklist.length === 0;
 
   useEffect(() => {
     if (hideBanner) {
@@ -79,25 +79,6 @@ function PerformanceSetupBanner({
     return null;
   }
 
-  if (projectsWithOnboardingChecklist.length === 0) {
-    return (
-      <Alert.Container>
-        <Alert type="info">
-          {tct(
-            "Some of the projects associated with this trace aren't sending spans, so you're only getting a partial trace view. To learn how to enable tracing for all your projects, visit our [documentationLink].",
-            {
-              documentationLink: (
-                <ExternalLink href="https://docs.sentry.io/product/performance/getting-started/">
-                  {t('documentation')}
-                </ExternalLink>
-              ),
-            }
-          )}
-        </Alert>
-      </Alert.Container>
-    );
-  }
-
   return (
     <TraceWarningComponents.Banner
       title={t('Your setup is incomplete')}

static/app/views/performance/newTraceDetails/traceTypeWarnings/index.tsx

@@ -95,7 +95,6 @@ const BannerWrapper = styled('div')`
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};
   padding: ${space(2)} ${space(3)};
-  margin-bottom: ${space(2)};
   background: linear-gradient(
     90deg,
     ${p => p.theme.backgroundSecondary}00 0%,

static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx

@@ -86,7 +86,6 @@ import {
   traceNodeAdjacentAnalyticsProperties,
   traceNodeAnalyticsName,
 } from './traceTreeAnalytics';
-import TraceTypeWarnings from './traceTypeWarnings';
 import {TraceWaterfallState} from './traceWaterfallState';
 import {useTraceOnLoad} from './useTraceOnLoad';
 import {useTraceQueryParamStateSync} from './useTraceQueryParamStateSync';
@@ -756,11 +755,6 @@ export function TraceWaterfall(props: TraceWaterfallProps) {
 
   return (
     <Flex direction="column" flex={1}>
-      <TraceTypeWarnings
-        tree={props.tree}
-        traceSlug={props.traceSlug}
-        organization={organization}
-      />
       <TraceToolbar>
         <TraceSearchInput onTraceSearch={onTraceSearch} organization={organization} />
         <TraceOpenInExploreButton