Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ref(replay): make configure replay card mobile-specific #82120

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+53 −3
Open

ref(replay): make configure replay card mobile-specific #82120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions static/app/components/replays/configureMobileReplayCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import {ClassNames} from '@emotion/react';

import {Button} from 'sentry/components/button';
import {Hovercard} from 'sentry/components/hovercard';
import {ButtonContainer, Resource} from 'sentry/components/replays/configureReplayCard';
import {IconQuestion} from 'sentry/icons';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';

function ResourceButtons() {
return (
<ButtonContainer>
<Resource
title={t('General')}
subtitle={t('Configure sampling rates and recording thresholds')}
link="https://docs.sentry.io/platforms/android/session-replay/#sampling"
/>
<Resource
title={t('Element Masking/Blocking')}
subtitle={t('Unmask text (****) and unblock media (img, svg, video, etc.)')}
link="https://docs.sentry.io/platforms/android/session-replay/#privacy"
/>
</ButtonContainer>
);
}

export default function ConfigureMobileReplayCard() {
return (
<ClassNames>
{({css}) => (
<Hovercard
body={<ResourceButtons />}
bodyClassName={css`
padding: ${space(1)};
`}
position="top-end"
>
<Button
size="sm"
icon={<IconQuestion />}
aria-label={t('replay configure resources')}
>
{t('Configure Replay')}
</Button>
</Hovercard>
)}
</ClassNames>
);
}
4 changes: 2 additions & 2 deletions static/app/components/replays/configureReplayCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {space} from 'sentry/styles/space';
import {trackAnalytics} from 'sentry/utils/analytics';
import useOrganization from 'sentry/utils/useOrganization';

function Resource({
export function Resource({
title,
subtitle,
link,
Expand Down Expand Up @@ -95,7 +95,7 @@ export default function ConfigureReplayCard() {
);
}

const ButtonContainer = styled('div')`
export const ButtonContainer = styled('div')`
display: flex;
flex-direction: column;
gap: ${space(1)};
Expand Down
3 changes: 2 additions & 1 deletion static/app/views/replays/detail/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import UserBadge from 'sentry/components/idBadge/userBadge';
import FullViewport from 'sentry/components/layouts/fullViewport';
import * as Layout from 'sentry/components/layouts/thirds';
import Placeholder from 'sentry/components/placeholder';
import ConfigureMobileReplayCard from 'sentry/components/replays/configureMobileReplayCard';
import ConfigureReplayCard from 'sentry/components/replays/configureReplayCard';
import DetailsPageBreadcrumbs from 'sentry/components/replays/header/detailsPageBreadcrumbs';
import FeedbackButton from 'sentry/components/replays/header/feedbackButton';
Expand Down Expand Up @@ -95,7 +96,7 @@ export default function Page({
) : (
<Fragment>
{isVideoReplay ? <FeedbackWidgetButton /> : <FeedbackButton />}
{isVideoReplay ? null : <ConfigureReplayCard />}
{isVideoReplay ? <ConfigureMobileReplayCard /> : <ConfigureReplayCard />}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we have the replayRecord already is it's not still loading. Maybe we can pass in the platform and deep link to the specific docs for the project that the replay is inside; whether that's mobile or web specific.

Maybe if the replayRecord is still loading then picks. Default value, or change links to somewhere else.. I'm thinking aloud here tho

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i thought about that but it's hard because the apple docs are structured differently in the URL than the react native or android. apple has an extra .../apple/guides/ios/session-replay/ while android is .../android/session-replay/ which means we have to case on the platform. it was already sort of a pain for the onboarding, and if we want to do it again for even more platforms then it could get complicated

plus if we cased on the platform for mobile then we'd have to do it for web, and there are a lot more web docs, esp the javascript sub-platforms. ex .../javascript/guides/angular/session-replay/

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds like a Monday problem!

</Fragment>
)}

Expand Down
Loading