missingPerformanceButtons.tsx 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import {navigateTo} from 'sentry/actionCreators/navigation';
  2. import Feature from 'sentry/components/acl/feature';
  3. import {Button} from 'sentry/components/button';
  4. import ButtonBar from 'sentry/components/buttonBar';
  5. import FeatureTourModal from 'sentry/components/modals/featureTourModal';
  6. import {t} from 'sentry/locale';
  7. import {Organization} from 'sentry/types';
  8. import {trackAnalytics} from 'sentry/utils/analytics';
  9. import useRouter from 'sentry/utils/useRouter';
  10. import {PERFORMANCE_TOUR_STEPS} from 'sentry/views/performance/onboarding';
  11. const DOCS_URL = 'https://docs.sentry.io/performance-monitoring/getting-started/';
  12. type Props = {
  13. organization: Organization;
  14. };
  15. function MissingPerformanceButtons({organization}: Props) {
  16. const router = useRouter();
  17. function handleTourAdvance(step: number, duration: number) {
  18. trackAnalytics('project_detail.performance_tour.advance', {
  19. organization,
  20. step,
  21. duration,
  22. });
  23. }
  24. function handleClose(step: number, duration: number) {
  25. trackAnalytics('project_detail.performance_tour.close', {
  26. organization,
  27. step,
  28. duration,
  29. });
  30. }
  31. return (
  32. <Feature
  33. hookName="feature-disabled:project-performance-score-card"
  34. features="performance-view"
  35. organization={organization}
  36. >
  37. <ButtonBar gap={1}>
  38. <Button
  39. size="sm"
  40. priority="primary"
  41. onClick={event => {
  42. event.preventDefault();
  43. // TODO: add analytics here for this specific action.
  44. navigateTo(
  45. `/organizations/${organization.slug}/performance/?project=:project#performance-sidequest`,
  46. router
  47. );
  48. }}
  49. >
  50. {t('Start Setup')}
  51. </Button>
  52. <FeatureTourModal
  53. steps={PERFORMANCE_TOUR_STEPS}
  54. onAdvance={handleTourAdvance}
  55. onCloseModal={handleClose}
  56. doneText={t('Start Setup')}
  57. doneUrl={DOCS_URL}
  58. >
  59. {({showModal}) => (
  60. <Button size="sm" onClick={showModal}>
  61. {t('Get Tour')}
  62. </Button>
  63. )}
  64. </FeatureTourModal>
  65. </ButtonBar>
  66. </Feature>
  67. );
  68. }
  69. export default MissingPerformanceButtons;