finishSetupAlert.tsx 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import styled from '@emotion/styled';
  2. import Button from 'sentry/components/button';
  3. import PageAlertBar from 'sentry/components/pageAlertBar';
  4. import {IconLightning} from 'sentry/icons';
  5. import {t} from 'sentry/locale';
  6. import space from 'sentry/styles/space';
  7. import {Organization} from 'sentry/types';
  8. import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
  9. export default function FinishSetupAlert({
  10. organization,
  11. projectId,
  12. }: {
  13. organization: Organization;
  14. projectId: string;
  15. }) {
  16. return (
  17. <PageAlertBar>
  18. <IconLightning />
  19. <TextWrapper>
  20. {t(
  21. 'You are viewing a sample transaction. Configure performance to start viewing real transactions.'
  22. )}
  23. </TextWrapper>
  24. <Button
  25. size="xs"
  26. priority="primary"
  27. external
  28. href="https://docs.sentry.io/performance-monitoring/getting-started/"
  29. onClick={() =>
  30. trackAdvancedAnalyticsEvent('growth.sample_transaction_docs_link_clicked', {
  31. project_id: projectId,
  32. organization,
  33. })
  34. }
  35. >
  36. {t('Get Started')}
  37. </Button>
  38. </PageAlertBar>
  39. );
  40. }
  41. const TextWrapper = styled('span')`
  42. margin: 0 ${space(1)};
  43. `;