ref(replays): make unsupported banner wording more general (#67174)

Making changes based on the Figma:

https://www.figma.com/file/bbTpXNRRu7NY4MDaAAFiJe/Specs%3A-Session-Replay-Mobile-Alpha-1?type=design&node-id=1-2768&mode=design&t=sjABiU8hIhkZdf2t-0

The banner is more general, and links to our product page that explains
what SDKs we support, rather than the javascript page.
<img width="1202" alt="SCR-20240318-lodr"
src="https://github.com/getsentry/sentry/assets/56095982/dfccd713-fd2d-47e0-8d07-2a8c2d2feaf2">

Author: michellewzhang

static/app/components/replays/alerts/replayUnsupportedAlert.stories.tsx

@@ -1,16 +1,15 @@
+import {Fragment} from 'react';
+
 import ReplayUnsupportedAlert from 'sentry/components/replays/alerts/replayUnsupportedAlert';
-import Matrix from 'sentry/components/stories/matrix';
 import storyBook from 'sentry/stories/storyBook';
 
 export default storyBook(ReplayUnsupportedAlert, story => {
-  story('All', () => (
-    <Matrix
-      propMatrix={{
-        primaryAction: ['create', 'setup'],
-        projectSlug: ['MY-PROJECT'],
-      }}
-      render={ReplayUnsupportedAlert}
-      selectedProps={['primaryAction', 'projectSlug']}
-    />
-  ));
+  story('All', () => {
+    return (
+      <Fragment>
+        <p>Requires a project slug to be passed in:</p>
+        <ReplayUnsupportedAlert projectSlug="MY-PROJECT" />
+      </Fragment>
+    );
+  });
 });

static/app/components/replays/alerts/replayUnsupportedAlert.tsx

@@ -4,26 +4,19 @@ import {IconInfo} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 
 interface Props {
-  primaryAction: 'create' | 'setup';
   projectSlug: string;
 }
 
-export default function ReplayUnsupportedAlert({primaryAction, projectSlug}: Props) {
+export default function ReplayUnsupportedAlert({projectSlug}: Props) {
   const link = (
-    <ExternalLink href="https://docs.sentry.io/platforms/javascript/session-replay/" />
+    <ExternalLink href="https://docs.sentry.io/product/session-replay/getting-started/" />
   );
   return (
     <Alert icon={<IconInfo />}>
       <strong>{t(`Session Replay isn't available for %s.`, projectSlug)}</strong>{' '}
-      {primaryAction === 'create'
-        ? tct(
-            `Create a project using our [link:Sentry browser SDK package], or equivalent framework SDK.`,
-            {link}
-          )
-        : tct(
-            `Select a project using our [link:Sentry browser SDK package], or equivalent framework SDK.`,
-            {link}
-          )}
+      {tct(`To learn more about which SDKs we support, please visit our [link:docs].`, {
+        link,
+      })}
     </Alert>
   );
 }

static/app/views/replays/list/replayOnboardingPanel.tsx

@@ -94,10 +94,7 @@ export default function ReplayOnboardingPanel() {
     <Fragment>
       <OnboardingAlertHook>
         {hasSelectedProjects && allSelectedProjectsUnsupported && (
-          <ReplayUnsupportedAlert
-            primaryAction={primaryAction}
-            projectSlug={selectedProjects[0].slug}
-          />
+          <ReplayUnsupportedAlert projectSlug={selectedProjects[0].slug} />
         )}
       </OnboardingAlertHook>
       <ReplayPanel image={<HeroImage src={emptyStateImg} breakpoints={breakpoints} />}>