ref(replay onboarding): move trace prop message & remove intro text (#62688)

Now the message is wrapped in a blue alert, to emphasize it even more.

Shows up in JS Loader:
<img width="492" alt="SCR-20240105-jkle"
src="https://github.com/getsentry/sentry/assets/56095982/00c90074-07c4-41fb-a1c9-ef460ff70c2a">

Shows up in NPM/Yarn:
<img width="541" alt="SCR-20240105-jkjz"
src="https://github.com/getsentry/sentry/assets/56095982/8783b61e-0860-49df-968d-56f53246ef70">

No more intro text:
<img width="457" alt="SCR-20240105-jpil"
src="https://github.com/getsentry/sentry/assets/56095982/a50c2b85-6976-4129-ac00-bc012cec8711">

static/app/components/replaysOnboarding/replayOnboardingLayout.tsx

@@ -91,7 +91,6 @@ export function ReplayOnboardingLayout({
             <PlatformOptionsControl platformOptions={platformOptions} />
           ) : null}
         </Header>
-        <Divider withBottomMargin />
         <Steps>
           {steps.map(step =>
             step.type === StepType.CONFIGURE ? (
@@ -123,14 +122,8 @@ const Header = styled('div')`
   display: flex;
   flex-direction: column;
   gap: ${space(2)};
-`;
-
-const Divider = styled('hr')<{withBottomMargin?: boolean}>`
-  height: 1px;
-  width: 100%;
-  background: ${p => p.theme.border};
-  border: none;
-  ${p => p.withBottomMargin && `margin-bottom: ${space(3)}`}
+  margin-bottom: ${space(3)};
+  margin-top: 0;
 `;
 
 const Steps = styled('div')`

static/app/components/replaysOnboarding/sidebar.tsx

@@ -7,7 +7,6 @@ import HighlightTopRightPattern from 'sentry-images/pattern/highlight-top-right.
 import {Button} from 'sentry/components/button';
 import {CompactSelect} from 'sentry/components/compactSelect';
 import IdBadge from 'sentry/components/idBadge';
-import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import useOnboardingDocs from 'sentry/components/onboardingWizard/useOnboardingDocs';
 import {ReplayOnboardingLayout} from 'sentry/components/replaysOnboarding/replayOnboardingLayout';
@@ -333,24 +332,6 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
   return (
     <Fragment>
       <IntroText>
-        {tct(
-          `Adding Session Replay to your [platform] project is simple. Make sure you've got these basics down.`,
-          {platform: currentPlatform?.name || currentProject.slug}
-        )}
-        {showJsFrameworkInstructions ? (
-          <div>
-            {tct(
-              `Also, ensure that you have set up trace propagation in your backend projects. To learn more, [link:read the docs].`,
-              {
-                link: (
-                  <ExternalLink href="https://docs.sentry.io/product/session-replay/getting-started/#:~:text=Make%20sure%20you%27ve%20set%20up%20trace%20propagation%20in%20your%20backend%20projects." />
-                ),
-              }
-            )}
-          </div>
-        ) : (
-          ''
-        )}
         {showJsFrameworkInstructions ? (
           <PlatformSelect>
             {t('Select your JS Framework: ')}
@@ -436,7 +417,7 @@ function OnboardingStepV2({step, content}: OnboardingStepV2Props) {
 }
 
 const IntroText = styled('div')`
-  padding-top: ${space(3)};
+  padding-top: ${space(1)};
   display: grid;
   gap: ${space(1)};
 `;

static/app/components/replaysOnboarding/utils.tsx

@@ -1,7 +1,10 @@
 import partition from 'lodash/partition';
 
+import Alert from 'sentry/components/alert';
+import ExternalLink from 'sentry/components/links/externalLink';
 import {replayFrontendPlatforms, replayPlatforms} from 'sentry/data/platformCategories';
 import platforms from 'sentry/data/platforms';
+import {tct} from 'sentry/locale';
 import {PlatformIntegration, PlatformKey, Project} from 'sentry/types';
 
 export function generateDocKeys(platform: PlatformKey): string[] {
@@ -30,3 +33,16 @@ export function splitProjectsByReplaySupport(projects: Project[]) {
 export const replayJsFrameworkOptions: PlatformIntegration[] = platforms.filter(p =>
   replayFrontendPlatforms.includes(p.id)
 );
+
+export const tracePropagationMessage = (
+  <Alert type="info" showIcon>
+    {tct(
+      `To see replays for backend errors, ensure that you have set up trace propagation. To learn more, [link:read the docs].`,
+      {
+        link: (
+          <ExternalLink href="https://docs.sentry.io/product/session-replay/getting-started/#replays-for-backend-errors/" />
+        ),
+      }
+    )}
+  </Alert>
+);

static/app/gettingStartedDocs/capacitor/capacitor.tsx

@@ -11,6 +11,7 @@ import {
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
+import {tracePropagationMessage} from 'sentry/components/replaysOnboarding/utils';
 import {t, tct} from 'sentry/locale';
 
 export enum SiblingOption {
@@ -419,6 +420,7 @@ const replayOnboarding: OnboardingConfig<PlatformOptions> = {
         showExtraStep: false,
         showDescription: false,
       }),
+      additionalInfo: tracePropagationMessage,
     },
   ],
   verify: () => [],

static/app/gettingStartedDocs/electron/electron.tsx

@@ -11,6 +11,7 @@ import {
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {tracePropagationMessage} from 'sentry/components/replaysOnboarding/utils';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -140,6 +141,7 @@ const replayOnboarding: OnboardingConfig = {
               }),
             },
           ],
+          additionalInfo: tracePropagationMessage,
         },
       ],
     },

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -12,6 +12,7 @@ import {
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
+import {tracePropagationMessage} from 'sentry/components/replaysOnboarding/utils';
 import {t, tct} from 'sentry/locale';
 
 export enum AngularVersion {
@@ -286,6 +287,7 @@ const replayOnboarding: OnboardingConfig<PlatformOptions> = {
           ],
         },
       ],
+      additionalInfo: tracePropagationMessage,
     },
   ],
   verify: () => [],

static/app/gettingStartedDocs/javascript/astro.tsx

@@ -12,6 +12,7 @@ import {
   getReplaySDKSetupSnippet,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {tracePropagationMessage} from 'sentry/components/replaysOnboarding/utils';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -220,6 +221,7 @@ const replayOnboarding: OnboardingConfig = {
           ],
         },
       ],
+      additionalInfo: tracePropagationMessage,
     },
   ],
   verify: () => [],

static/app/gettingStartedDocs/javascript/ember.tsx

@@ -10,6 +10,7 @@ import {
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {tracePropagationMessage} from 'sentry/components/replaysOnboarding/utils';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -182,6 +183,7 @@ const replayOnboarding: OnboardingConfig = {
           ],
         },
       ],
+      additionalInfo: tracePropagationMessage,
     },
   ],
   verify: () => [],

static/app/gettingStartedDocs/javascript/gatsby.tsx

@@ -1,3 +1,5 @@
+import {Fragment} from 'react';
+
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
 import {
   Docs,
@@ -10,6 +12,7 @@ import {
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {tracePropagationMessage} from 'sentry/components/replaysOnboarding/utils';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -196,14 +199,19 @@ const replayOnboarding: OnboardingConfig = {
         link: 'https://docs.sentry.io/platforms/javascript/guides/gatsby/session-replay/',
       }),
       configurations: [getConfigureStep(params)],
-      additionalInfo: tct(
-        'Note: If [codeGatsby:gatsby-config.js] has any settings for the [codeSentry:@sentry/gatsby] plugin, they need to be moved into [codeConfig:sentry.config.js]. The [codeGatsby:gatsby-config.js] file does not support non-serializable options, like [codeNew:new Replay()].',
-        {
-          codeGatsby: <code />,
-          codeSentry: <code />,
-          codeConfig: <code />,
-          codeNew: <code />,
-        }
+      additionalInfo: (
+        <Fragment>
+          {tracePropagationMessage}
+          {tct(
+            'Note: If [codeGatsby:gatsby-config.js] has any settings for the [codeSentry:@sentry/gatsby] plugin, they need to be moved into [codeConfig:sentry.config.js]. The [codeGatsby:gatsby-config.js] file does not support non-serializable options, like [codeNew:new Replay()].',
+            {
+              codeGatsby: <code />,
+              codeSentry: <code />,
+              codeConfig: <code />,
+              codeNew: <code />,
+            }
+          )}
+        </Fragment>
       ),
     },
   ],

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -10,6 +10,7 @@ import {
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {tracePropagationMessage} from 'sentry/components/replaysOnboarding/utils';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 
@@ -178,6 +179,7 @@ const replayOnboarding: OnboardingConfig = {
           ],
         },
       ],
+      additionalInfo: tracePropagationMessage,
     },
   ],
   verify: () => [],