From 18abe96b2da8517d34c440698c5d1140dcc0d4ee Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Mon, 6 Jan 2025 09:44:57 -0800 Subject: [PATCH] ref(replay): rm beta badges and add grace period banner for mobile replay (#82467) - closes https://github.com/getsentry/sentry/issues/77646 - closes https://github.com/getsentry/sentry/issues/82651 to be merged closer to GA date (jan 6) added the grace period banner to this PR: SCR-20241230-ksjo --------- Co-authored-by: Bruno Garcia --- .../gettingStartedDoc/utils/index.tsx | 14 -------- .../replays/header/detailsPageBreadcrumbs.tsx | 28 ++-------------- .../components/replaysOnboarding/sidebar.tsx | 31 ++++++------------ .../gettingStartedDocs/android/android.tsx | 4 --- static/app/gettingStartedDocs/apple/ios.tsx | 4 --- .../gettingStartedDocs/flutter/flutter.tsx | 4 --- .../react-native/react-native.tsx | 4 --- static/app/views/replays/detail/page.tsx | 12 ++----- static/app/views/replays/list.tsx | 32 +++++++++++++------ 9 files changed, 35 insertions(+), 98 deletions(-) diff --git a/static/app/components/onboarding/gettingStartedDoc/utils/index.tsx b/static/app/components/onboarding/gettingStartedDoc/utils/index.tsx index aa3b91ed13b4de..fd7d66bd3aaa84 100644 --- a/static/app/components/onboarding/gettingStartedDoc/utils/index.tsx +++ b/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 ( - - {tct( - `Currently, Mobile Replay is in beta. To learn more, you can [link:read our docs].`, - { - link: , - } - )} - - ); -} diff --git a/static/app/components/replays/header/detailsPageBreadcrumbs.tsx b/static/app/components/replays/header/detailsPageBreadcrumbs.tsx index 0e8d761aba89b5..431571751b110e 100644 --- a/static/app/components/replays/header/detailsPageBreadcrumbs.tsx +++ b/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,19 +52,7 @@ function DetailsPageBreadcrumbs({orgSlug, replayRecord, isVideoReplay}: Props) { ) : null, }, { - label: isVideoReplay ? ( - - {labelTitle} - - - ) : ( - labelTitle - ), + label: labelTitle, }, ]} /> @@ -76,11 +60,3 @@ function DetailsPageBreadcrumbs({orgSlug, replayRecord, isVideoReplay}: Props) { } export default DetailsPageBreadcrumbs; - -const CenteredFeatureBadge = styled(FeatureBadge)` - height: ${space(2)}; -`; - -const StyledSpan = styled('span')` - display: flex; -`; diff --git a/static/app/components/replaysOnboarding/sidebar.tsx b/static/app/components/replaysOnboarding/sidebar.tsx index e40f0a2e5b30af..7dcd0a55c273ef 100644 --- a/static/app/components/replaysOnboarding/sidebar.tsx +++ b/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 (
@@ -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 ( - - ); - } - if (currentPlatform.language === 'apple') { - return ( - - ); - } - } - return ( {radioButtons} diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index fde1bfd570a0e1..b7ee30643bf7a8 100644 --- a/static/app/gettingStartedDocs/android/android.tsx +++ b/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 = { }; const replayOnboarding: OnboardingConfig = { - introduction: () => ( - - ), install: (params: Params) => [ { type: StepType.INSTALL, diff --git a/static/app/gettingStartedDocs/apple/ios.tsx b/static/app/gettingStartedDocs/apple/ios.tsx index 4f0b4174de1342..5b474bc1e1386f 100644 --- a/static/app/gettingStartedDocs/apple/ios.tsx +++ b/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 = { }; const replayOnboarding: OnboardingConfig = { - introduction: () => ( - - ), install: (params: Params) => [ { type: StepType.INSTALL, diff --git a/static/app/gettingStartedDocs/flutter/flutter.tsx b/static/app/gettingStartedDocs/flutter/flutter.tsx index 3036a06eb16d2f..6711f3e3e3d61b 100644 --- a/static/app/gettingStartedDocs/flutter/flutter.tsx +++ b/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: () => ( - - ), install: (params: Params) => [ { type: StepType.INSTALL, diff --git a/static/app/gettingStartedDocs/react-native/react-native.tsx b/static/app/gettingStartedDocs/react-native/react-native.tsx index 90ea172c84d0d1..70dc4f5cf9dd39 100644 --- a/static/app/gettingStartedDocs/react-native/react-native.tsx +++ b/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: () => ( - - ), install: (params: Params) => [ { type: StepType.INSTALL, diff --git a/static/app/views/replays/detail/page.tsx b/static/app/views/replays/detail/page.tsx index 8a9d9a328541d5..2466a1793c894c 100644 --- a/static/app/views/replays/detail/page.tsx +++ b/static/app/views/replays/detail/page.tsx @@ -76,19 +76,11 @@ export default function Page({ const header = replayRecord?.is_archived ? (
- +
) : (
- + {isLoading ? ( diff --git a/static/app/views/replays/list.tsx b/static/app/views/replays/list.tsx index 0166b85a7a297e..1b5328a371484c 100644 --- a/static/app/views/replays/list.tsx +++ b/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 ( @@ -37,14 +40,6 @@ function ReplaysListContainer() { )} docsUrl="https://docs.sentry.io/product/session-replay/" /> - {allMobileProj ? ( - - ) : null}
{/* wraps the tabs below the page title */} @@ -55,6 +50,19 @@ function ReplaysListContainer() { + {allMobileProj && mobileBetaOrg ? ( + } 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: , + link: ( + + ), + } + )} + + ) : null} @@ -69,4 +77,8 @@ const LayoutGap = styled('div')` gap: ${space(2)}; `; +const StyledAlert = styled(Alert)` + margin: 0; +`; + export default ReplaysListContainer;