feat(aggregate-waterfall): Add dismissable info banner to the aggregate waterfall page (#57742)

static/app/components/events/interfaces/spans/aggregateSpans.tsx

@@ -1,15 +1,21 @@
-import {useMemo} from 'react';
+import {Fragment, useMemo} from 'react';
+import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
+import Alert from 'sentry/components/alert';
 import TraceView from 'sentry/components/events/interfaces/spans/traceView';
 import {AggregateSpanType} from 'sentry/components/events/interfaces/spans/types';
 import WaterfallModel from 'sentry/components/events/interfaces/spans/waterfallModel';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import Panel from 'sentry/components/panels/panel';
+import {IconClose} from 'sentry/icons';
+import {tct} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import {AggregateEventTransaction, EntryType, EventOrGroupType} from 'sentry/types/event';
 import {defined} from 'sentry/utils';
 import {useApiQuery} from 'sentry/utils/queryClient';
+import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 
@@ -64,6 +70,11 @@ export function AggregateSpans({transaction}: Props) {
   const organization = useOrganization();
   const {data, isLoading} = useAggregateSpans({transaction});
 
+  const [isBannerOpen, setIsBannerOpen] = useLocalStorageState<boolean>(
+    'aggregate-waterfall-info-banner',
+    true
+  );
+
   function formatSpan(span, total) {
     const {
       node_fingerprint: span_id,
@@ -151,13 +162,35 @@ export function AggregateSpans({transaction}: Props) {
   }
 
   return (
-    <Panel>
-      <TraceView
-        waterfallModel={waterfallModel}
-        organization={organization}
-        isEmbedded
-        isAggregate
-      />
-    </Panel>
+    <Fragment>
+      {isBannerOpen && (
+        <StyledAlert
+          type="info"
+          showIcon
+          trailingItems={<StyledCloseButton onClick={() => setIsBannerOpen(false)} />}
+        >
+          {tct(
+            'This is an aggregate view across [x] events. You can see how frequent each span appears in the aggregate and identify any outliers.',
+            {x: event.count}
+          )}
+        </StyledAlert>
+      )}
+      <Panel>
+        <TraceView
+          waterfallModel={waterfallModel}
+          organization={organization}
+          isEmbedded
+          isAggregate
+        />
+      </Panel>
+    </Fragment>
   );
 }
+
+const StyledAlert = styled(Alert)`
+  margin-bottom: ${space(2)};
+`;
+
+const StyledCloseButton = styled(IconClose)`
+  cursor: pointer;
+`;