platform.tsx 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. import {Fragment, useCallback, useEffect, useState} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {loadDocs} from 'sentry/actionCreators/projects';
  5. import Feature from 'sentry/components/acl/feature';
  6. import {Alert} from 'sentry/components/alert';
  7. import {Button} from 'sentry/components/button';
  8. import ButtonBar from 'sentry/components/buttonBar';
  9. import NotFound from 'sentry/components/errors/notFound';
  10. import LoadingError from 'sentry/components/loadingError';
  11. import LoadingIndicator from 'sentry/components/loadingIndicator';
  12. import {DocumentationWrapper} from 'sentry/components/onboarding/documentationWrapper';
  13. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  14. import {
  15. performance as performancePlatforms,
  16. PlatformKey,
  17. } from 'sentry/data/platformCategories';
  18. import platforms from 'sentry/data/platforms';
  19. import {IconChevron} from 'sentry/icons';
  20. import {t, tct} from 'sentry/locale';
  21. import {space} from 'sentry/styles/space';
  22. import useApi from 'sentry/utils/useApi';
  23. import useOrganization from 'sentry/utils/useOrganization';
  24. import useProjects from 'sentry/utils/useProjects';
  25. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  26. import {Footer} from 'sentry/views/onboarding/components/footer';
  27. type Props = RouteComponentProps<{platform: string; projectId: string}, {}>;
  28. export function ProjectInstallPlatform({location, params, route, router}: Props) {
  29. const api = useApi();
  30. const organization = useOrganization();
  31. const [loading, setLoading] = useState(true);
  32. const [error, setError] = useState(false);
  33. const [html, setHtml] = useState('');
  34. const {projects, initiallyLoaded} = useProjects({
  35. slugs: [params.projectId],
  36. orgId: organization.slug,
  37. });
  38. const loadingProjects = !initiallyLoaded;
  39. const project = projects.filter(proj => proj.slug === params.projectId)[0];
  40. const fetchData = useCallback(async () => {
  41. setLoading(true);
  42. try {
  43. const {html: reponse} = await loadDocs(
  44. api,
  45. organization.slug,
  46. params.projectId,
  47. params.platform as PlatformKey
  48. );
  49. setHtml(reponse);
  50. } catch (err) {
  51. setError(err);
  52. }
  53. setLoading(false);
  54. }, [api, organization.slug, params]);
  55. const redirectToNeutralDocs = useCallback(() => {
  56. const url = `/organizations/${organization.slug}/projects/${params.projectId}/getting-started/`;
  57. router.push(normalizeUrl(url));
  58. }, [organization.slug, params.projectId, router]);
  59. useEffect(() => {
  60. fetchData();
  61. window.scrollTo(0, 0);
  62. // redirect if platform is not known.
  63. if (!params.platform || params.platform === 'other') {
  64. redirectToNeutralDocs();
  65. }
  66. }, [fetchData, redirectToNeutralDocs, params.platform]);
  67. const platform = platforms.find(p => p.id === params.platform);
  68. if (!platform) {
  69. return <NotFound />;
  70. }
  71. const issueStreamLink = `/organizations/${organization.slug}/issues/`;
  72. const performanceOverviewLink = `/organizations/${organization.slug}/performance/`;
  73. const gettingStartedLink = `/organizations/${organization.slug}/projects/${params.projectId}/getting-started/`;
  74. const platformLink = platform.link ?? undefined;
  75. const showPerformancePrompt = performancePlatforms.includes(platform.id as PlatformKey);
  76. const heartbeatFooter = !!organization?.features.includes(
  77. 'onboarding-heartbeat-footer'
  78. );
  79. const isGettingStarted = window.location.href.indexOf('getting-started') > 0;
  80. return (
  81. <Fragment>
  82. <StyledPageHeader>
  83. <h2>{t('Configure %(platform)s', {platform: platform.name})}</h2>
  84. <ButtonBar gap={1}>
  85. <Button
  86. icon={<IconChevron direction="left" size="sm" />}
  87. size="sm"
  88. to={gettingStartedLink}
  89. >
  90. {t('Back')}
  91. </Button>
  92. <Button size="sm" href={platformLink} external>
  93. {t('Full Documentation')}
  94. </Button>
  95. </ButtonBar>
  96. </StyledPageHeader>
  97. <div>
  98. <Alert type="info" showIcon>
  99. {tct(
  100. `
  101. This is a quick getting started guide. For in-depth instructions
  102. on integrating Sentry with [platform], view
  103. [docLink:our complete documentation].`,
  104. {
  105. platform: platform.name,
  106. docLink: <a href={platformLink} />,
  107. }
  108. )}
  109. </Alert>
  110. {loading ? (
  111. <LoadingIndicator />
  112. ) : error ? (
  113. <LoadingError onRetry={fetchData} />
  114. ) : (
  115. <Fragment>
  116. <SentryDocumentTitle
  117. title={`${t('Configure')} ${platform.name}`}
  118. projectSlug={params.projectId}
  119. />
  120. <DocumentationWrapper dangerouslySetInnerHTML={{__html: html}} />
  121. </Fragment>
  122. )}
  123. {isGettingStarted && showPerformancePrompt && (
  124. <Feature
  125. features={['performance-view']}
  126. hookName="feature-disabled:performance-new-project"
  127. >
  128. {({hasFeature}) => {
  129. if (hasFeature) {
  130. return null;
  131. }
  132. return (
  133. <StyledAlert type="info" showIcon>
  134. {t(
  135. `Your selected platform supports performance, but your organization does not have performance enabled.`
  136. )}
  137. </StyledAlert>
  138. );
  139. }}
  140. </Feature>
  141. )}
  142. {isGettingStarted && heartbeatFooter ? (
  143. <Footer
  144. projectSlug={params.projectId}
  145. projectId={project?.id}
  146. route={route}
  147. router={router}
  148. location={location}
  149. />
  150. ) : (
  151. <StyledButtonBar gap={1}>
  152. <Button
  153. priority="primary"
  154. busy={loadingProjects}
  155. to={{
  156. pathname: issueStreamLink,
  157. query: project?.id,
  158. hash: '#welcome',
  159. }}
  160. >
  161. {t('Take me to Issues')}
  162. </Button>
  163. <Button
  164. busy={loadingProjects}
  165. to={{
  166. pathname: performanceOverviewLink,
  167. query: project?.id,
  168. }}
  169. >
  170. {t('Take me to Performance')}
  171. </Button>
  172. </StyledButtonBar>
  173. )}
  174. </div>
  175. </Fragment>
  176. );
  177. }
  178. const StyledButtonBar = styled(ButtonBar)`
  179. margin-top: ${space(3)};
  180. width: max-content;
  181. @media (max-width: ${p => p.theme.breakpoints.small}) {
  182. width: auto;
  183. grid-row-gap: ${space(1)};
  184. grid-auto-flow: row;
  185. }
  186. `;
  187. const StyledPageHeader = styled('div')`
  188. display: flex;
  189. justify-content: space-between;
  190. margin-bottom: ${space(3)};
  191. h2 {
  192. margin: 0;
  193. }
  194. @media (max-width: ${p => p.theme.breakpoints.small}) {
  195. flex-direction: column;
  196. align-items: flex-start;
  197. h2 {
  198. margin-bottom: ${space(2)};
  199. }
  200. }
  201. `;
  202. const StyledAlert = styled(Alert)`
  203. margin-top: ${space(2)};
  204. `;