ref(replay): rm beta badges and add grace period banner for mobile replay (#82467)

- closes #77646
- closes #82651

to be merged closer to GA date (jan 6)

added the grace period banner to this PR:

<img width="1269" alt="SCR-20241230-ksjo"
src="https://github.com/user-attachments/assets/e4877671-a4fe-4aa4-9deb-00238e86cb75"
/>

---------

Co-authored-by: Bruno Garcia <[email protected]>

Author: michellewzhang

static/app/components/onboarding/gettingStartedDoc/utils/index.tsx

@@ -1,4 +1,3 @@
-import Alert from 'sentry/components/alert';
 import ExternalLink from 'sentry/components/links/externalLink';
 import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {t, tct} from 'sentry/locale';
@@ -67,16 +66,3 @@ export function getUploadSourceMapsStep({
     ],
   };
 }
-
-export function MobileBetaBanner({link}: {link: string}) {
-  return (
-    <Alert type="info" showIcon>
-      {tct(
-        `Currently, Mobile Replay is in beta. To learn more, you can [link:read our docs].`,
-        {
-          link: <ExternalLink href={link} />,
-        }
-      )}
-    </Alert>
-  );
-}

static/app/components/replays/header/detailsPageBreadcrumbs.tsx

@@ -1,12 +1,9 @@
 import {Fragment} from 'react';
-import styled from '@emotion/styled';
 
-import FeatureBadge from 'sentry/components/badge/featureBadge';
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import Placeholder from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import EventView from 'sentry/utils/discover/eventView';
 import {getShortEventId} from 'sentry/utils/events';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
@@ -15,12 +12,11 @@ import useProjects from 'sentry/utils/useProjects';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
 type Props = {
-  isVideoReplay: boolean | undefined;
   orgSlug: string;
   replayRecord: ReplayRecord | undefined;
 };
 
-function DetailsPageBreadcrumbs({orgSlug, replayRecord, isVideoReplay}: Props) {
+function DetailsPageBreadcrumbs({orgSlug, replayRecord}: Props) {
   const location = useLocation();
   const eventView = EventView.fromLocation(location);
 
@@ -56,31 +52,11 @@ function DetailsPageBreadcrumbs({orgSlug, replayRecord, isVideoReplay}: Props) {
           ) : null,
         },
         {
-          label: isVideoReplay ? (
-            <StyledSpan>
-              {labelTitle}
-              <CenteredFeatureBadge
-                type="beta"
-                title={t(
-                  'Session Replay for mobile apps is currently in beta. Beta features are still in progress and may have bugs.'
-                )}
-              />
-            </StyledSpan>
-          ) : (
-            labelTitle
-          ),
+          label: labelTitle,
         },
       ]}
     />
   );
 }
 
 export default DetailsPageBreadcrumbs;
-
-const CenteredFeatureBadge = styled(FeatureBadge)`
-  height: ${space(2)};
-`;
-
-const StyledSpan = styled('span')`
-  display: flex;
-`;

static/app/components/replaysOnboarding/sidebar.tsx

@@ -10,7 +10,6 @@ import {CompactSelect} from 'sentry/components/compactSelect';
 import RadioGroup from 'sentry/components/forms/controls/radioGroup';
 import IdBadge from 'sentry/components/idBadge';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import useCurrentProjectState from 'sentry/components/onboarding/gettingStartedDoc/utils/useCurrentProjectState';
 import {useLoadGettingStarted} from 'sentry/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted';
 import {PlatformOptionDropdown} from 'sentry/components/replaysOnboarding/platformOptionDropdown';
@@ -326,8 +325,15 @@ function OnboardingContent({
     );
   }
 
-  // No platform, docs import failed, no DSN, or the platform doesn't have onboarding yet
-  if (!currentPlatform || !docs || !dsn || !hasDocs || !projectKeyId) {
+  // No platform, docs import failed, no DSN, ingestion is turned off, or the platform doesn't have onboarding yet
+  if (
+    !currentPlatform ||
+    !docs ||
+    !dsn ||
+    !hasDocs ||
+    !projectKeyId ||
+    organization.features.includes('session-replay-video-disabled')
+  ) {
     return (
       <Fragment>
         <div>
@@ -349,25 +355,6 @@ function OnboardingContent({
     );
   }
 
-  // if the org cannot ingest mobile replay events, don't show the onboarding
-  // TODO: remove once we GA mobile replay
-  if (organization.features.includes('session-replay-video-disabled')) {
-    if (['android', 'react-native'].includes(currentPlatform.language)) {
-      return (
-        <MobileBetaBanner
-          link={`https://docs.sentry.io/platforms/${currentPlatform.language}/session-replay/`}
-        />
-      );
-    }
-    if (currentPlatform.language === 'apple') {
-      return (
-        <MobileBetaBanner
-          link={`https://docs.sentry.io/platforms/apple/guides/ios/session-replay/`}
-        />
-      );
-    }
-  }
-
   return (
     <Fragment>
       {radioButtons}

static/app/gettingStartedDocs/android/android.tsx

@@ -10,7 +10,6 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
-import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {
   getReplayMobileConfigureDescription,
   getReplayVerifyStep,
@@ -303,9 +302,6 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
 };
 
 const replayOnboarding: OnboardingConfig<PlatformOptions> = {
-  introduction: () => (
-    <MobileBetaBanner link="https://docs.sentry.io/platforms/android/session-replay/" />
-  ),
   install: (params: Params) => [
     {
       type: StepType.INSTALL,

static/app/gettingStartedDocs/apple/ios.tsx

@@ -9,7 +9,6 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
-import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {
   getReplayMobileConfigureDescription,
@@ -650,9 +649,6 @@ const metricsOnboarding: OnboardingConfig<PlatformOptions> = {
 };
 
 const replayOnboarding: OnboardingConfig<PlatformOptions> = {
-  introduction: () => (
-    <MobileBetaBanner link="https://docs.sentry.io/platforms/android/session-replay/" />
-  ),
   install: (params: Params) => [
     {
       type: StepType.INSTALL,

static/app/gettingStartedDocs/flutter/flutter.tsx

@@ -10,7 +10,6 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
-import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import exampleSnippets from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsExampleSnippets';
 import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {
@@ -368,9 +367,6 @@ const onboarding: OnboardingConfig = {
 };
 
 const replayOnboarding: OnboardingConfig = {
-  introduction: () => (
-    <MobileBetaBanner link="https://docs.sentry.io/platforms/flutter/session-replay/" />
-  ),
   install: (params: Params) => [
     {
       type: StepType.INSTALL,

static/app/gettingStartedDocs/react-native/react-native.tsx

@@ -9,7 +9,6 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
-import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {
   getCrashReportApiIntroduction,
   getCrashReportInstallDescription,
@@ -402,9 +401,6 @@ const getInstallConfig = () => [
 ];
 
 const replayOnboarding: OnboardingConfig = {
-  introduction: () => (
-    <MobileBetaBanner link="https://docs.sentry.io/platforms/react-native/session-replay/" />
-  ),
   install: (params: Params) => [
     {
       type: StepType.INSTALL,

static/app/views/replays/detail/page.tsx

@@ -76,19 +76,11 @@ export default function Page({
 
   const header = replayRecord?.is_archived ? (
     <Header>
-      <DetailsPageBreadcrumbs
-        orgSlug={orgSlug}
-        replayRecord={replayRecord}
-        isVideoReplay={isVideoReplay}
-      />
+      <DetailsPageBreadcrumbs orgSlug={orgSlug} replayRecord={replayRecord} />
     </Header>
   ) : (
     <Header>
-      <DetailsPageBreadcrumbs
-        orgSlug={orgSlug}
-        replayRecord={replayRecord}
-        isVideoReplay={isVideoReplay}
-      />
+      <DetailsPageBreadcrumbs orgSlug={orgSlug} replayRecord={replayRecord} />
 
       <ButtonActionsWrapper>
         {isLoading ? (

static/app/views/replays/list.tsx

@@ -1,13 +1,15 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import FeatureBadge from 'sentry/components/badge/featureBadge';
+import Alert from 'sentry/components/alert';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import * as Layout from 'sentry/components/layouts/thirds';
+import ExternalLink from 'sentry/components/links/externalLink';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import {t} from 'sentry/locale';
+import {IconInfo} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -24,6 +26,7 @@ function ReplaysListContainer() {
   useReplayPageview('replay.list-time-spent');
   const organization = useOrganization();
   const {allMobileProj} = useAllMobileProj();
+  const mobileBetaOrg = organization.features.includes('mobile-replay-beta-orgs');
 
   return (
     <SentryDocumentTitle title={`Session Replay — ${organization.slug}`}>
@@ -37,14 +40,6 @@ function ReplaysListContainer() {
               )}
               docsUrl="https://docs.sentry.io/product/session-replay/"
             />
-            {allMobileProj ? (
-              <FeatureBadge
-                type="beta"
-                title={t(
-                  'Session Replay for mobile apps is currently in beta. Beta features are still in progress and may have bugs.'
-                )}
-              />
-            ) : null}
           </Layout.Title>
         </Layout.HeaderContent>
         <div /> {/* wraps the tabs below the page title */}
@@ -55,6 +50,19 @@ function ReplaysListContainer() {
           <Layout.Main fullWidth>
             <LayoutGap>
               <ReplayListPageHeaderHook />
+              {allMobileProj && mobileBetaOrg ? (
+                <StyledAlert icon={<IconInfo />} showIcon>
+                  {tct(
+                    `[strong:Mobile Replay is now generally available.] Since you participated in the beta, will have a two month grace period of free usage, until March 6. After that, you will be billed for [link:additional replays not included in your plan].`,
+                    {
+                      strong: <strong />,
+                      link: (
+                        <ExternalLink href="https://docs.sentry.io/pricing/#replays-pricing" />
+                      ),
+                    }
+                  )}
+                </StyledAlert>
+              ) : null}
               <ListContent />
             </LayoutGap>
           </Layout.Main>
@@ -69,4 +77,8 @@ const LayoutGap = styled('div')`
   gap: ${space(2)};
 `;
 
+const StyledAlert = styled(Alert)`
+  margin: 0;
+`;
+
 export default ReplaysListContainer;