import {Fragment, useState} from 'react';
import styled from '@emotion/styled';
import emptyStateImg from 'sentry-images/spot/replays-empty-state.svg';
import Accordion from 'sentry/components/accordion/accordion';
import {Button} from 'sentry/components/button';
import ButtonBar from 'sentry/components/buttonBar';
import HookOrDefault from 'sentry/components/hookOrDefault';
import ExternalLink from 'sentry/components/links/externalLink';
import {useProjectCreationAccess} from 'sentry/components/projects/useProjectCreationAccess';
import QuestionTooltip from 'sentry/components/questionTooltip';
import ReplayUnsupportedAlert from 'sentry/components/replays/alerts/replayUnsupportedAlert';
import {Tooltip} from 'sentry/components/tooltip';
import {replayPlatforms} from 'sentry/data/platformCategories';
import {t, tct} from 'sentry/locale';
import PreferencesStore from 'sentry/stores/preferencesStore';
import {useLegacyStore} from 'sentry/stores/useLegacyStore';
import {space} from 'sentry/styles/space';
import {useReplayOnboardingSidebarPanel} from 'sentry/utils/replays/hooks/useReplayOnboarding';
import useOrganization from 'sentry/utils/useOrganization';
import usePageFilters from 'sentry/utils/usePageFilters';
import useProjects from 'sentry/utils/useProjects';
import {HeaderContainer, WidgetContainer} from 'sentry/views/profiling/landing/styles';
import ReplayPanel from 'sentry/views/replays/list/replayPanel';
type Breakpoints = {
large: string;
medium: string;
small: string;
xlarge: string;
};
const OnboardingCTAHook = HookOrDefault({
hookName: 'component:replay-onboarding-cta',
defaultComponent: ({children}) => {children},
});
const OnboardingCTAButton = HookOrDefault({
hookName: 'component:replay-onboarding-cta-button',
defaultComponent: null,
});
const OnboardingAlertHook = HookOrDefault({
hookName: 'component:replay-onboarding-alert',
defaultComponent: ({children}) => {children},
});
export default function ReplayOnboardingPanel() {
const preferences = useLegacyStore(PreferencesStore);
const pageFilters = usePageFilters();
const projects = useProjects();
const organization = useOrganization();
const {canCreateProject} = useProjectCreationAccess({organization});
const selectedProjects = projects.projects.filter(p =>
pageFilters.selection.projects.includes(Number(p.id))
);
const hasSelectedProjects = selectedProjects.length > 0;
const allProjectsUnsupported = projects.projects.every(
p => !replayPlatforms.includes(p.platform!)
);
const allSelectedProjectsUnsupported = selectedProjects.every(
p => !replayPlatforms.includes(p.platform!)
);
// if all projects are unsupported we should prompt the user to create a project
// else we prompt to setup
const primaryAction = allProjectsUnsupported ? 'create' : 'setup';
// disable "create" if the user has insufficient permissions
// disable "setup" if the current selected pageFilters are not supported
const primaryActionDisabled =
primaryAction === 'create'
? !canCreateProject
: allSelectedProjectsUnsupported && hasSelectedProjects;
const breakpoints = preferences.collapsed
? {
small: '800px',
medium: '992px',
large: '1210px',
xlarge: '1450px',
}
: {
small: '800px',
medium: '1175px',
large: '1375px',
xlarge: '1450px',
};
return (
{hasSelectedProjects && allSelectedProjectsUnsupported && (
)}
}>
);
}
interface SetupReplaysCTAProps {
orgSlug: string;
primaryAction: 'setup' | 'create';
disabled?: boolean;
}
export function SetupReplaysCTA({
disabled,
primaryAction = 'setup',
orgSlug,
}: SetupReplaysCTAProps) {
const {activateSidebar} = useReplayOnboardingSidebarPanel();
const [expanded, setExpanded] = useState(-1);
const FAQ = [
{
header: () => (
{t('Can I use Session Replay with my app?')}
),
content: () => (
{t(
'Session Replay supports all browser-based applications and certain native mobile platforms, such as iOS and Android. Our native Android and iOS SDKs are currently in alpha. Features are still in progress and may have some bugs. We recognize the irony.'
)}
{t(
'For browser-based applications, this includes static websites, single-page applications, and also server-side rendered applications. The only prerequisite is that your application uses Sentry JavaScript SDK (version 7.2.0 or greater) either with NPM/Yarn or with our JS Loader script.'
)}
{tct(
'To learn more about which SDKs we support, please visit [link:our docs].',
{
link: (
),
}
)}
{t(
'Session Replay adds a small amount of performance overhead to your web application. For most web apps, the performance overhead of our client SDK will be imperceptible to end-users. For example, the Sentry site has Replay enabled and we have not seen any significant slowdowns.'
)}
{t(
'The performance overhead generally scales linearly with the DOM complexity of your application. The more DOM state changes that occur in the application lifecycle, the more events that are captured, transmitted, etc.'
)}
{tct(
'To learn more about how we’ve optimized our SDK, please visit [link:our docs].',
{
link: (
),
}
)}
),
},
{
header: () => (
{t('How do you protect user data?')}
),
content: () => (
{t(
'We offer a range of privacy controls to let developers ensure that no sensitive user information leaves the browser. By default, our privacy configuration is very aggressive and masks all text and images, but you can choose to just mask user input text, for example.'
)}
{tct(
'To learn more about how we protect user privacy, please visit [link:our docs].',
{
link: (
),
}
)}
),
},
];
function renderCTA() {
if (primaryAction === 'setup') {
return (
{t('Select a supported project from the projects dropdown.')}
}
disabled={!disabled} // we only want to show the tooltip when the button is disabled
>
);
}
return (
{t('You do not have permission to create a project.')}
}
disabled={!disabled}
>
);
}
return (
{t('Get to the root cause faster')}
{t(
'See a video-like reproduction of your user sessions so you can see what happened before, during, and after an error or latency issue occurred.'
)}