feat(metrics): Add custom metrics banner (#70946)

Closes #70210



https://github.com/getsentry/sentry/assets/9060071/7fdac524-f806-4244-bdf3-063509b7362d

Author: matejminar

static/app/utils/analytics/ddmAnalyticsEvents.tsx

@@ -7,7 +7,7 @@ export type DDMEventParameters = {
     source: 'global' | 'widget';
   };
   'ddm.open-onboarding': {
-    source: 'onboarding_panel' | 'header';
+    source: 'onboarding_panel' | 'header' | 'banner';
   };
   'ddm.opt_in_modal_closed': {
     source: 'im_in' | 'learn_more' | 'close_button';

static/app/views/metrics/layout.tsx

@@ -1,10 +1,12 @@
 import {Fragment, memo, useCallback} from 'react';
+import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
 import emptyStateImg from 'sentry-images/spot/custom-metrics-empty-state.svg';
 
 import FeatureBadge from 'sentry/components/badge/featureBadge';
+import Banner from 'sentry/components/banner';
 import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
@@ -21,8 +23,11 @@ import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {METRICS_DOCS_URL} from 'sentry/utils/metrics/constants';
 import useDismissAlert from 'sentry/utils/useDismissAlert';
+import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
+import useMedia from 'sentry/utils/useMedia';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import BackgroundSpace from 'sentry/views/discover/backgroundSpace';
 import {useMetricsContext} from 'sentry/views/metrics/context';
 import {useMetricsOnboardingSidebar} from 'sentry/views/metrics/ddmOnboarding/useMetricsOnboardingSidebar';
 import {IntervalSelect} from 'sentry/views/metrics/intervalSelect';
@@ -42,9 +47,12 @@ export const MetricsLayout = memo(() => {
     useDismissAlert({
       key: `${organization.id}:${selectedProjects}:metrics-empty-state-dismissed`,
     });
+  const theme = useTheme();
+  const isSmallBanner = useMedia(`(max-width: ${theme.breakpoints.medium})`);
+  const [isBannerDismissed] = useLocalStorageState('metrics-banner-dismissed', false);
 
   const addCustomMetric = useCallback(
-    (referrer: 'header' | 'onboarding_panel') => {
+    (referrer: 'header' | 'onboarding_panel' | 'banner') => {
       Sentry.metrics.increment('ddm.add_custom_metric', 1, {
         tags: {
           referrer,
@@ -84,14 +92,35 @@ export const MetricsLayout = memo(() => {
         </Layout.HeaderContent>
         <Layout.HeaderActions>
           <PageHeaderActions
-            showCustomMetricButton={hasCustomMetrics || isEmptyStateDismissed}
+            showCustomMetricButton={
+              hasCustomMetrics || (isEmptyStateDismissed && isBannerDismissed)
+            }
             addCustomMetric={() => addCustomMetric('header')}
           />
         </Layout.HeaderActions>
       </Layout.Header>
       <Layout.Body>
         <FloatingFeedbackWidget />
         <Layout.Main fullWidth>
+          {isEmptyStateDismissed && !hasCustomMetrics && (
+            <Banner
+              title={t('Custom Metrics')}
+              subtitle={t(
+                "Track your system's behaviour and profit from the same powerful features as you do with errors, like alerting and dashboards."
+              )}
+              backgroundComponent={<BackgroundSpace />}
+              dismissKey="metrics"
+            >
+              <Button
+                size={isSmallBanner ? 'xs' : undefined}
+                translucentBorder
+                onClick={() => addCustomMetric('banner')}
+              >
+                {t('Set Up')}
+              </Button>
+            </Banner>
+          )}
+
           <FilterContainer>
             <PageFilterBar condensed>
               <ProjectPageFilter />
@@ -122,7 +151,10 @@ export const MetricsLayout = memo(() => {
                     priority="primary"
                     onClick={() => addCustomMetric('onboarding_panel')}
                   >
-                    {t('Add Custom Metric')}
+                    {t('Set Up Custom Metric')}
+                  </Button>
+                  <Button href={METRICS_DOCS_URL} external>
+                    {t('Read Docs')}
                   </Button>
                   {hasPerformanceMetrics && (
                     <Button onClick={viewPerformanceMetrics}>

static/app/views/metrics/pageHeaderActions.tsx

@@ -148,7 +148,7 @@ export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Pro
     <ButtonBar gap={1}>
       {showCustomMetricButton && (
         <Button priority="primary" onClick={() => addCustomMetric()} size="sm">
-          {t('Set Up Custom Metrics')}
+          {t('Add Custom Metrics')}
         </Button>
       )}
       <Button