demoSandboxButton.tsx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import Button from 'sentry/components/button';
  2. import {Organization, SandboxData} from 'sentry/types';
  3. import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
  4. import useOrganization from 'sentry/utils/useOrganization';
  5. type Props = {
  6. /**
  7. * The deep link scenario
  8. */
  9. scenario:
  10. | 'performance'
  11. | 'releases'
  12. | 'alerts'
  13. | 'discover'
  14. | 'dashboards'
  15. | 'projects'
  16. | 'oneDiscoverQuery'
  17. | 'oneIssue'
  18. | 'oneBreadcrumb'
  19. | 'oneStackTrace'
  20. | 'oneTransaction'
  21. | 'oneWebVitals'
  22. | 'oneTransactionSummary'
  23. | 'oneRelease';
  24. /**
  25. * Which project we should link to in the sandbox
  26. */
  27. projectSlug?: 'react' | 'python' | 'ios' | 'android' | 'react-native';
  28. /**
  29. * Matching on the error type or title
  30. */
  31. errorType?: string;
  32. clientData?: SandboxData;
  33. } & React.ComponentProps<typeof Button>;
  34. /**
  35. * Renders a button that will kick off the sandbox around children
  36. * which should include be a button. If the sandbox is hidden,
  37. * don't render the children
  38. */
  39. function DemoSandboxButton({
  40. scenario,
  41. projectSlug,
  42. errorType,
  43. clientData,
  44. ...buttonProps
  45. }: Props) {
  46. const organization: Organization = useOrganization();
  47. const url = new URL('https://try.sentry-demo.com/demo/start/');
  48. if (scenario) url.searchParams.append('scenario', scenario);
  49. if (projectSlug) url.searchParams.append('projectSlug', projectSlug);
  50. if (errorType) url.searchParams.append('errorType', errorType);
  51. // always skip adding email when coming from in-product
  52. const clientOptions: SandboxData = {
  53. skipEmail: true,
  54. acceptedTracking: true,
  55. ...clientData,
  56. };
  57. url.searchParams.append('client', JSON.stringify(clientOptions));
  58. return (
  59. <Button
  60. external
  61. href={url.toString()}
  62. onClick={() =>
  63. trackAdvancedAnalyticsEvent('growth.clicked_enter_sandbox', {
  64. scenario,
  65. organization,
  66. })
  67. }
  68. {...buttonProps}
  69. />
  70. );
  71. }
  72. export default DemoSandboxButton;