123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477 |
- import 'prism-sentry/index.css';
- import {Fragment, useCallback, useEffect, useState} from 'react';
- import {browserHistory} from 'react-router';
- import {css} from '@emotion/react';
- import styled from '@emotion/styled';
- import {AnimatePresence, motion} from 'framer-motion';
- import * as qs from 'query-string';
- import {loadDocs} from 'sentry/actionCreators/projects';
- import Alert, {alertStyles} from 'sentry/components/alert';
- import Button from 'sentry/components/button';
- import ExternalLink from 'sentry/components/links/externalLink';
- import LoadingError from 'sentry/components/loadingError';
- import {PlatformKey} from 'sentry/data/platformCategories';
- import platforms from 'sentry/data/platforms';
- import {IconChevron} from 'sentry/icons';
- import {t, tct} from 'sentry/locale';
- import space from 'sentry/styles/space';
- import {Organization, Project} from 'sentry/types';
- import {logExperiment} from 'sentry/utils/analytics';
- import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
- import getDynamicText from 'sentry/utils/getDynamicText';
- import {Theme} from 'sentry/utils/theme';
- import useApi from 'sentry/utils/useApi';
- import withProjects from 'sentry/utils/withProjects';
- import FirstEventFooter from './components/firstEventFooter';
- import FullIntroduction from './components/fullIntroduction';
- import ProjectSidebarSection from './components/projectSidebarSection';
- import {StepProps} from './types';
- import {usePersistedOnboardingState} from './utils';
- /**
- * The documentation will include the following string should it be missing the
- * verification example, which currently a lot of docs are.
- */
- const INCOMPLETE_DOC_FLAG = 'TODO-ADD-VERIFICATION-EXAMPLE';
- type PlatformDoc = {html: string; link: string; wizardSetup: string};
- type Props = {
- projects: Project[];
- search: string;
- loadingProjects?: boolean;
- } & StepProps;
- function ProjecDocs(props: {
- hasError: boolean;
- onRetry: () => void;
- organization: Organization;
- platform: PlatformKey | null;
- platformDocs: PlatformDoc | null;
- project: Project;
- }) {
- const testOnlyAlert = (
- <Alert type="warning">
- Platform documentation is not rendered in for tests in CI
- </Alert>
- );
- const missingExampleWarning = () => {
- const missingExample =
- props.platformDocs && props.platformDocs.html.includes(INCOMPLETE_DOC_FLAG);
- if (!missingExample) {
- return null;
- }
- return (
- <Alert type="warning" showIcon>
- {tct(
- `Looks like this getting started example is still undergoing some
- work and doesn't include an example for triggering an event quite
- yet. If you have trouble sending your first event be sure to consult
- the [docsLink:full documentation] for [platform].`,
- {
- docsLink: <ExternalLink href={props.platformDocs?.link} />,
- platform: platforms.find(p => p.id === props.platform)?.name,
- }
- )}
- </Alert>
- );
- };
- useEffect(() => {
- props.platformDocs?.wizardSetup &&
- logExperiment({
- key: 'OnboardingHighlightWizardExperiment',
- organization: props.organization,
- });
- }, [props.organization, props.platformDocs?.wizardSetup]);
- const showWizardSetup =
- props.organization.experiments.OnboardingHighlightWizardExperiment;
- const [wizardSetupDetailsCollapsed, setWizardSetupDetailsCollapsed] = useState(true);
- const [interacted, setInteracted] = useState(false);
- const docs =
- props.platformDocs !== null &&
- (showWizardSetup && props.platformDocs.wizardSetup ? (
- <DocsWrapper key={props.platformDocs.html}>
- <Content
- dangerouslySetInnerHTML={{__html: props.platformDocs.wizardSetup}}
- onMouseDown={() => {
- !interacted &&
- trackAdvancedAnalyticsEvent('growth.onboarding_wizard_interacted', {
- organization: props.organization,
- project_id: props.project.id,
- platform: props.platform || 'unknown',
- wizard_instructions: true,
- });
- setInteracted(true);
- }}
- />
- <Button
- priority="link"
- onClick={() => {
- trackAdvancedAnalyticsEvent('growth.onboarding_wizard_clicked_more_details', {
- organization: props.organization,
- project_id: props.project.id,
- platform: props.platform || 'unknown',
- });
- setWizardSetupDetailsCollapsed(!wizardSetupDetailsCollapsed);
- }}
- >
- <IconChevron
- direction={wizardSetupDetailsCollapsed ? 'down' : 'up'}
- style={{marginRight: space(1)}}
- />
- {wizardSetupDetailsCollapsed ? t('More Details') : t('Less Details')}
- </Button>
- <AnimatePresence>
- {!wizardSetupDetailsCollapsed && (
- <AnimatedContentWrapper>
- <Content dangerouslySetInnerHTML={{__html: props.platformDocs.html}} />
- {missingExampleWarning()}
- </AnimatedContentWrapper>
- )}
- </AnimatePresence>
- </DocsWrapper>
- ) : (
- <DocsWrapper key={props.platformDocs.html}>
- <Content
- dangerouslySetInnerHTML={{__html: props.platformDocs.html}}
- onMouseDown={() => {
- !interacted &&
- trackAdvancedAnalyticsEvent('growth.onboarding_wizard_interacted', {
- organization: props.organization,
- project_id: props.project.id,
- platform: props.platform || undefined,
- wizard_instructions: false,
- });
- setInteracted(true);
- }}
- />
- {missingExampleWarning()}
- </DocsWrapper>
- ));
- const loadingError = (
- <LoadingError
- message={t(
- 'Failed to load documentation for the %s platform.',
- props.project?.platform
- )}
- onRetry={props.onRetry}
- />
- );
- const currentPlatform = props.platform ?? props.project?.platform ?? 'other';
- return (
- <Fragment>
- <FullIntroduction
- currentPlatform={currentPlatform}
- organization={props.organization}
- />
- {getDynamicText({
- value: !props.hasError ? docs : loadingError,
- fixed: testOnlyAlert,
- })}
- </Fragment>
- );
- }
- function SetupDocs({
- organization,
- projects: rawProjects,
- search,
- loadingProjects,
- }: Props) {
- const api = useApi();
- const [clientState, setClientState] = usePersistedOnboardingState();
- const selectedPlatforms = clientState?.selectedPlatforms || [];
- const platformToProjectIdMap = clientState?.platformToProjectIdMap || {};
- // id is really slug here
- const projectSlugs = selectedPlatforms
- .map(platform => platformToProjectIdMap[platform])
- .filter((slug): slug is string => slug !== undefined);
- const selectedProjectsSet = new Set(projectSlugs);
- // get projects in the order they appear in selectedPlatforms
- const projects = projectSlugs
- .map(slug => rawProjects.find(project => project.slug === slug))
- .filter((project): project is Project => project !== undefined);
- // SDK instrumentation
- const [hasError, setHasError] = useState(false);
- const [platformDocs, setPlatformDocs] = useState<PlatformDoc | null>(null);
- const [loadedPlatform, setLoadedPlatform] = useState<PlatformKey | null>(null);
- // store what projects have sent first event in state based project.firstEvent
- const [hasFirstEventMap, setHasFirstEventMap] = useState<Record<string, boolean>>(
- projects.reduce((accum, project: Project) => {
- accum[project.id] = !!project.firstEvent;
- return accum;
- }, {} as Record<string, boolean>)
- );
- const checkProjectHasFirstEvent = (project: Project) => {
- return !!hasFirstEventMap[project.id];
- };
- const {project_id: rawProjectId} = qs.parse(search);
- const rawProjectIndex = projects.findIndex(p => p.id === rawProjectId);
- const firstProjectNoError = projects.findIndex(
- p => selectedProjectsSet.has(p.slug) && !checkProjectHasFirstEvent(p)
- );
- // Select a project based on search params. If non exist, use the first project without first event.
- const projectIndex = rawProjectIndex >= 0 ? rawProjectIndex : firstProjectNoError;
- const project = projects[projectIndex];
- // find the next project that doesn't have a first event
- const nextProject = projects.find(
- (p, i) => i > projectIndex && !checkProjectHasFirstEvent(p)
- );
- useEffect(() => {
- // should not redirect if we don't have an active client state or projects aren't loaded
- if (!clientState || loadingProjects) {
- return;
- }
- if (
- // If no projects remaining, then we can leave
- !project
- ) {
- browserHistory.push('/');
- }
- });
- const currentPlatform = loadedPlatform ?? project?.platform ?? 'other';
- const fetchData = useCallback(async () => {
- // TODO: add better error handling logic
- if (!project?.platform) {
- return;
- }
- try {
- const loadedDocs = await loadDocs(
- api,
- organization.slug,
- project.slug,
- project.platform
- );
- setPlatformDocs(loadedDocs);
- setLoadedPlatform(project.platform);
- setHasError(false);
- } catch (error) {
- setHasError(error);
- throw error;
- }
- }, [project, api, organization]);
- useEffect(() => {
- fetchData();
- }, [fetchData]);
- if (!project) {
- return null;
- }
- const setNewProject = (newProjectId: string) => {
- const searchParams = new URLSearchParams({
- sub_step: 'project',
- project_id: newProjectId,
- });
- browserHistory.push(`${window.location.pathname}?${searchParams}`);
- clientState &&
- setClientState({
- ...clientState,
- state: 'projects_selected',
- url: `setup-docs/?${searchParams}`,
- });
- };
- const selectProject = (newProjectId: string) => {
- const matchedProject = projects.find(p => p.id === newProjectId);
- trackAdvancedAnalyticsEvent('growth.onboarding_clicked_project_in_sidebar', {
- organization,
- platform: matchedProject?.platform || 'unknown',
- });
- setNewProject(newProjectId);
- };
- return (
- <Fragment>
- <Wrapper>
- <SidebarWrapper>
- <ProjectSidebarSection
- projects={projects}
- selectedPlatformToProjectIdMap={Object.fromEntries(
- selectedPlatforms.map(platform => [
- platform,
- platformToProjectIdMap[platform],
- ])
- )}
- activeProject={project}
- {...{checkProjectHasFirstEvent, selectProject}}
- />
- </SidebarWrapper>
- <MainContent>
- <ProjecDocs
- platform={loadedPlatform}
- organization={organization}
- project={project}
- hasError={hasError}
- platformDocs={platformDocs}
- onRetry={fetchData}
- />
- </MainContent>
- </Wrapper>
- {project && (
- <FirstEventFooter
- project={project}
- organization={organization}
- isLast={!nextProject}
- hasFirstEvent={checkProjectHasFirstEvent(project)}
- onClickSetupLater={() => {
- const orgIssuesURL = `/organizations/${organization.slug}/issues/?project=${project.id}`;
- trackAdvancedAnalyticsEvent(
- 'growth.onboarding_clicked_setup_platform_later',
- {
- organization,
- platform: currentPlatform,
- project_index: projectIndex,
- }
- );
- if (!project.platform || !clientState) {
- browserHistory.push(orgIssuesURL);
- return;
- }
- // if we have a next project, switch to that
- if (nextProject) {
- setNewProject(nextProject.id);
- } else {
- setClientState({
- ...clientState,
- state: 'finished',
- });
- browserHistory.push(orgIssuesURL);
- }
- }}
- handleFirstIssueReceived={() => {
- const newHasFirstEventMap = {...hasFirstEventMap, [project.id]: true};
- setHasFirstEventMap(newHasFirstEventMap);
- }}
- />
- )}
- </Fragment>
- );
- }
- export default withProjects(SetupDocs);
- type AlertType = React.ComponentProps<typeof Alert>['type'];
- const getAlertSelector = (type: AlertType) =>
- type === 'muted' ? null : `.alert[level="${type}"], .alert-${type}`;
- const mapAlertStyles = (p: {theme: Theme}, type: AlertType) =>
- css`
- ${getAlertSelector(type)} {
- ${alertStyles({theme: p.theme, type})};
- display: block;
- }
- `;
- const AnimatedContentWrapper = styled(motion.div)`
- overflow: hidden;
- `;
- AnimatedContentWrapper.defaultProps = {
- initial: {
- height: 0,
- },
- animate: {
- height: 'auto',
- },
- exit: {
- height: 0,
- },
- };
- const Content = styled(motion.div)`
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p {
- margin-bottom: 18px;
- }
- div[data-language] {
- margin-bottom: ${space(2)};
- }
- code {
- font-size: 87.5%;
- color: ${p => p.theme.pink300};
- }
- pre code {
- color: inherit;
- font-size: inherit;
- white-space: pre;
- }
- h2 {
- font-size: 1.4em;
- }
- .alert h5 {
- font-size: 1em;
- margin-bottom: 0.625rem;
- }
- /**
- * XXX(epurkhiser): This comes from the doc styles and avoids bottom margin issues in alerts
- */
- .content-flush-bottom *:last-child {
- margin-bottom: 0;
- }
- ${p => Object.keys(p.theme.alert).map(type => mapAlertStyles(p, type as AlertType))}
- `;
- const DocsWrapper = styled(motion.div)``;
- DocsWrapper.defaultProps = {
- initial: {opacity: 0, y: 40},
- animate: {opacity: 1, y: 0},
- exit: {opacity: 0},
- };
- const Wrapper = styled('div')`
- display: flex;
- flex-direction: row;
- margin: ${space(2)};
- justify-content: center;
- `;
- const MainContent = styled('div')`
- max-width: 850px;
- min-width: 0;
- flex-grow: 1;
- `;
- // the number icon will be space(2) + 30px to the left of the margin of center column
- // so we need to offset the right margin by that much
- // also hide the sidebar if the screen is too small
- const SidebarWrapper = styled('div')`
- margin: ${space(1)} calc(${space(2)} + 30px + ${space(4)}) 0 ${space(2)};
- @media (max-width: 1150px) {
- display: none;
- }
- flex-basis: 240px;
- flex-grow: 0;
- flex-shrink: 0;
- min-width: 240px;
- `;
|