From d19a7275943906e3ea7dba93e62cf7effc412643 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Fri, 20 Dec 2024 12:16:18 -0500 Subject: [PATCH 1/6] ref(replay): rm beta badges and notes for mobile replay --- .../gettingStartedDoc/utils/index.tsx | 14 --------- .../replays/header/detailsPageBreadcrumbs.tsx | 28 ++---------------- .../components/replaysOnboarding/sidebar.tsx | 29 +++++++++---------- .../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 | 11 ------- 9 files changed, 18 insertions(+), 92 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 f2c6054f997d19..2ecf94ee624d9e 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'; @@ -352,20 +351,20 @@ 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 ( - - ); - } + // if (['android', 'react-native'].includes(currentPlatform.language)) { + // return ( + // + // ); + // } + // if (currentPlatform.language === 'apple') { + // return ( + // + // ); + // } } return ( diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index a59faeddb9bab9..1160caf393fccc 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 {getAndroidMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; import { getReplayMobileConfigureDescription, @@ -305,9 +304,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 ab221563fdad47..31cbc3e2d1f126 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, @@ -651,9 +650,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 d015c35a80d037..4ea05a4dbf4705 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, @@ -404,9 +403,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 87d0893faef718..4fe5efefdcf2eb 100644 --- a/static/app/views/replays/detail/page.tsx +++ b/static/app/views/replays/detail/page.tsx @@ -75,19 +75,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..f83df7f75efb54 100644 --- a/static/app/views/replays/list.tsx +++ b/static/app/views/replays/list.tsx @@ -1,7 +1,6 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; -import FeatureBadge from 'sentry/components/badge/featureBadge'; import HookOrDefault from 'sentry/components/hookOrDefault'; import * as Layout from 'sentry/components/layouts/thirds'; import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container'; @@ -11,7 +10,6 @@ import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview'; import useOrganization from 'sentry/utils/useOrganization'; -import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj'; import ListContent from 'sentry/views/replays/list/listContent'; import ReplayTabs from 'sentry/views/replays/tabs'; @@ -23,7 +21,6 @@ const ReplayListPageHeaderHook = HookOrDefault({ function ReplaysListContainer() { useReplayPageview('replay.list-time-spent'); const organization = useOrganization(); - const {allMobileProj} = useAllMobileProj(); return ( @@ -37,14 +34,6 @@ function ReplaysListContainer() { )} docsUrl="https://docs.sentry.io/product/session-replay/" /> - {allMobileProj ? ( - - ) : null}
{/* wraps the tabs below the page title */} From 0fd4b3d47fd8bb68bd909eea6740fd82d52268a9 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Fri, 20 Dec 2024 13:39:30 -0500 Subject: [PATCH 2/6] :recycle: keep flag --- .../components/replaysOnboarding/sidebar.tsx | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/static/app/components/replaysOnboarding/sidebar.tsx b/static/app/components/replaysOnboarding/sidebar.tsx index 2ecf94ee624d9e..976b77a5424c52 100644 --- a/static/app/components/replaysOnboarding/sidebar.tsx +++ b/static/app/components/replaysOnboarding/sidebar.tsx @@ -325,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 (
@@ -348,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} From 93dfb9b8998243521b7de4b0d17b64f11b7ffe92 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Mon, 30 Dec 2024 11:51:47 -0500 Subject: [PATCH 3/6] :sparkles: add banner --- static/app/views/replays/list.tsx | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/static/app/views/replays/list.tsx b/static/app/views/replays/list.tsx index f83df7f75efb54..c97a4d5ef60ba5 100644 --- a/static/app/views/replays/list.tsx +++ b/static/app/views/replays/list.tsx @@ -1,15 +1,19 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; +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'; +import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj'; import ListContent from 'sentry/views/replays/list/listContent'; import ReplayTabs from 'sentry/views/replays/tabs'; @@ -21,6 +25,9 @@ const ReplayListPageHeaderHook = HookOrDefault({ function ReplaysListContainer() { useReplayPageview('replay.list-time-spent'); const organization = useOrganization(); + const {allMobileProj} = useAllMobileProj(); + // const mobileBetaOrg = organization.features.includes('mobile-replay-beta-orgs'); + const mobileBetaOrg = true; return ( @@ -44,6 +51,19 @@ function ReplaysListContainer() { + {allMobileProj && mobileBetaOrg ? ( + } showIcon> + {t(`Mobile Replay is now generally available.`)}{' '} + {tct( + `Orgs that participated in the beta will have a two month grace period of unlimited usage until March 6. After that, you will be billed for [link:additional replays not included in your plan].`, + { + link: ( + + ), + } + )} + + ) : null} @@ -58,4 +78,8 @@ const LayoutGap = styled('div')` gap: ${space(2)}; `; +const StyledAlert = styled(Alert)` + margin: 0; +`; + export default ReplaysListContainer; From 8e142ad153e4a851e29205e38c9fdc39e3b87e3e Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Mon, 30 Dec 2024 11:52:00 -0500 Subject: [PATCH 4/6] :sparkles: add banner --- static/app/views/replays/list.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/static/app/views/replays/list.tsx b/static/app/views/replays/list.tsx index c97a4d5ef60ba5..0066ef6d0d673e 100644 --- a/static/app/views/replays/list.tsx +++ b/static/app/views/replays/list.tsx @@ -26,8 +26,7 @@ function ReplaysListContainer() { useReplayPageview('replay.list-time-spent'); const organization = useOrganization(); const {allMobileProj} = useAllMobileProj(); - // const mobileBetaOrg = organization.features.includes('mobile-replay-beta-orgs'); - const mobileBetaOrg = true; + const mobileBetaOrg = organization.features.includes('mobile-replay-beta-orgs'); return ( From 01c02b86e815e3448ea41ea3fe8561f25f09f468 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Mon, 30 Dec 2024 11:58:09 -0500 Subject: [PATCH 5/6] :recycle: fix tct --- static/app/views/replays/list.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/views/replays/list.tsx b/static/app/views/replays/list.tsx index 0066ef6d0d673e..5038bc2a38acb6 100644 --- a/static/app/views/replays/list.tsx +++ b/static/app/views/replays/list.tsx @@ -52,10 +52,10 @@ function ReplaysListContainer() { {allMobileProj && mobileBetaOrg ? ( } showIcon> - {t(`Mobile Replay is now generally available.`)}{' '} {tct( - `Orgs that participated in the beta will have a two month grace period of unlimited usage until March 6. After that, you will be billed for [link:additional replays not included in your plan].`, + `[strong:Mobile Replay is now generally available.] Orgs that participated in the beta will have a two month grace period of unlimited usage until March 6. After that, you will be billed for [link:additional replays not included in your plan].`, { + strong: , link: ( ), From 4eb52063ca068a7e8e917da743bac089bd44347b Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Mon, 30 Dec 2024 16:41:54 -0500 Subject: [PATCH 6/6] Update static/app/views/replays/list.tsx Co-authored-by: Bruno Garcia --- static/app/views/replays/list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/replays/list.tsx b/static/app/views/replays/list.tsx index 5038bc2a38acb6..1b5328a371484c 100644 --- a/static/app/views/replays/list.tsx +++ b/static/app/views/replays/list.tsx @@ -53,7 +53,7 @@ function ReplaysListContainer() { {allMobileProj && mobileBetaOrg ? ( } showIcon> {tct( - `[strong:Mobile Replay is now generally available.] Orgs that participated in the beta will have a two month grace period of unlimited usage until March 6. After that, you will be billed for [link:additional replays not included in your plan].`, + `[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: (