useOnboardingSidebar.tsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import {useCallback} from 'react';
  2. import {SidebarPanelKey} from 'sentry/components/sidebar/types';
  3. import SidebarPanelStore from 'sentry/stores/sidebarPanelStore';
  4. import {trackAnalytics} from 'sentry/utils/analytics';
  5. import type {QuickStartEventParameters} from 'sentry/utils/analytics/quickStartAnalyticsEvents';
  6. import useOrganization from 'sentry/utils/useOrganization';
  7. /**
  8. * Please be careful when using 'activateSidebar' function as a hook dependency,
  9. * as it gets re-created when the organization gets updated. This may trigger
  10. * unnecessary re-renders or side effects.
  11. */
  12. export function useOnboardingSidebar() {
  13. const organization = useOrganization();
  14. const activateSidebar = useCallback(
  15. ({
  16. source,
  17. userClicked,
  18. recordAnalytics = true,
  19. }: {
  20. source: QuickStartEventParameters['quick_start.opened']['source'];
  21. userClicked: boolean;
  22. recordAnalytics?: boolean;
  23. }) => {
  24. // Delay activating the onboarding panel until after the sidebar closes on route change
  25. setTimeout(() => {
  26. if (recordAnalytics) {
  27. trackAnalytics('quick_start.opened', {
  28. source,
  29. organization,
  30. user_clicked: userClicked,
  31. });
  32. }
  33. SidebarPanelStore.activatePanel(SidebarPanelKey.ONBOARDING_WIZARD);
  34. }, 0);
  35. },
  36. [organization]
  37. );
  38. return {activateSidebar};
  39. }