123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- import {Fragment, useCallback, useEffect, useState} from 'react';
- import {RouteComponentProps} from 'react-router';
- import styled from '@emotion/styled';
- import {loadDocs} from 'sentry/actionCreators/projects';
- import Feature from 'sentry/components/acl/feature';
- import {Alert} from 'sentry/components/alert';
- import {Button} from 'sentry/components/button';
- import ButtonBar from 'sentry/components/buttonBar';
- import NotFound from 'sentry/components/errors/notFound';
- import LoadingError from 'sentry/components/loadingError';
- import LoadingIndicator from 'sentry/components/loadingIndicator';
- import {DocumentationWrapper} from 'sentry/components/onboarding/documentationWrapper';
- import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
- import {
- performance as performancePlatforms,
- 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 useApi from 'sentry/utils/useApi';
- import useOrganization from 'sentry/utils/useOrganization';
- import useProjects from 'sentry/utils/useProjects';
- import {normalizeUrl} from 'sentry/utils/withDomainRequired';
- import {Footer} from 'sentry/views/onboarding/components/footer';
- type Props = RouteComponentProps<{platform: string; projectId: string}, {}>;
- export function ProjectInstallPlatform({location, params, route, router}: Props) {
- const api = useApi();
- const organization = useOrganization();
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(false);
- const [html, setHtml] = useState('');
- const {projects, initiallyLoaded} = useProjects({
- slugs: [params.projectId],
- orgId: organization.slug,
- });
- const loadingProjects = !initiallyLoaded;
- const project = projects.filter(proj => proj.slug === params.projectId)[0];
- const fetchData = useCallback(async () => {
- setLoading(true);
- try {
- const {html: reponse} = await loadDocs(
- api,
- organization.slug,
- params.projectId,
- params.platform as PlatformKey
- );
- setHtml(reponse);
- } catch (err) {
- setError(err);
- }
- setLoading(false);
- }, [api, organization.slug, params]);
- const redirectToNeutralDocs = useCallback(() => {
- const url = `/organizations/${organization.slug}/projects/${params.projectId}/getting-started/`;
- router.push(normalizeUrl(url));
- }, [organization.slug, params.projectId, router]);
- useEffect(() => {
- fetchData();
- window.scrollTo(0, 0);
- // redirect if platform is not known.
- if (!params.platform || params.platform === 'other') {
- redirectToNeutralDocs();
- }
- }, [fetchData, redirectToNeutralDocs, params.platform]);
- const platform = platforms.find(p => p.id === params.platform);
- if (!platform) {
- return <NotFound />;
- }
- const issueStreamLink = `/organizations/${organization.slug}/issues/`;
- const performanceOverviewLink = `/organizations/${organization.slug}/performance/`;
- const gettingStartedLink = `/organizations/${organization.slug}/projects/${params.projectId}/getting-started/`;
- const platformLink = platform.link ?? undefined;
- const showPerformancePrompt = performancePlatforms.includes(platform.id as PlatformKey);
- const heartbeatFooter = !!organization?.features.includes(
- 'onboarding-heartbeat-footer'
- );
- const isGettingStarted = window.location.href.indexOf('getting-started') > 0;
- return (
- <Fragment>
- <StyledPageHeader>
- <h2>{t('Configure %(platform)s', {platform: platform.name})}</h2>
- <ButtonBar gap={1}>
- <Button
- icon={<IconChevron direction="left" size="sm" />}
- size="sm"
- to={gettingStartedLink}
- >
- {t('Back')}
- </Button>
- <Button size="sm" href={platformLink} external>
- {t('Full Documentation')}
- </Button>
- </ButtonBar>
- </StyledPageHeader>
- <div>
- <Alert type="info" showIcon>
- {tct(
- `
- This is a quick getting started guide. For in-depth instructions
- on integrating Sentry with [platform], view
- [docLink:our complete documentation].`,
- {
- platform: platform.name,
- docLink: <a href={platformLink} />,
- }
- )}
- </Alert>
- {loading ? (
- <LoadingIndicator />
- ) : error ? (
- <LoadingError onRetry={fetchData} />
- ) : (
- <Fragment>
- <SentryDocumentTitle
- title={`${t('Configure')} ${platform.name}`}
- projectSlug={params.projectId}
- />
- <DocumentationWrapper dangerouslySetInnerHTML={{__html: html}} />
- </Fragment>
- )}
- {isGettingStarted && showPerformancePrompt && (
- <Feature
- features={['performance-view']}
- hookName="feature-disabled:performance-new-project"
- >
- {({hasFeature}) => {
- if (hasFeature) {
- return null;
- }
- return (
- <StyledAlert type="info" showIcon>
- {t(
- `Your selected platform supports performance, but your organization does not have performance enabled.`
- )}
- </StyledAlert>
- );
- }}
- </Feature>
- )}
- {isGettingStarted && heartbeatFooter ? (
- <Footer
- projectSlug={params.projectId}
- projectId={project?.id}
- route={route}
- router={router}
- location={location}
- />
- ) : (
- <StyledButtonBar gap={1}>
- <Button
- priority="primary"
- busy={loadingProjects}
- to={{
- pathname: issueStreamLink,
- query: project?.id,
- hash: '#welcome',
- }}
- >
- {t('Take me to Issues')}
- </Button>
- <Button
- busy={loadingProjects}
- to={{
- pathname: performanceOverviewLink,
- query: project?.id,
- }}
- >
- {t('Take me to Performance')}
- </Button>
- </StyledButtonBar>
- )}
- </div>
- </Fragment>
- );
- }
- const StyledButtonBar = styled(ButtonBar)`
- margin-top: ${space(3)};
- width: max-content;
- @media (max-width: ${p => p.theme.breakpoints.small}) {
- width: auto;
- grid-row-gap: ${space(1)};
- grid-auto-flow: row;
- }
- `;
- const StyledPageHeader = styled('div')`
- display: flex;
- justify-content: space-between;
- margin-bottom: ${space(3)};
- h2 {
- margin: 0;
- }
- @media (max-width: ${p => p.theme.breakpoints.small}) {
- flex-direction: column;
- align-items: flex-start;
- h2 {
- margin-bottom: ${space(2)};
- }
- }
- `;
- const StyledAlert = styled(Alert)`
- margin-top: ${space(2)};
- `;
|