feat(onboarding): add logging for Set Up Slack button (#77250)

add logging for when "Set Up Slack Now" button on the alert creation
page is clicked and when Slack installation is started/completed

these analytics will be used to compare the number of
clicks/installations between this current setup button and the new
messaging integration setup button

static/app/utils/analytics/onboardingAnalyticsEvents.tsx

@@ -53,6 +53,9 @@ export type OnboardingEventParameters = {
     platform: string;
     project_id: string;
   };
+  'onboarding.slack_setup_clicked': {
+    project_id: string;
+  };
   'onboarding.source_maps_wizard_button_copy_clicked': {
     platform: string;
     project_id: string;
@@ -110,4 +113,5 @@ export const onboardingEventMap: Record<keyof OnboardingEventParameters, string>
     'Onboarding: Take Me to Performance Clicked',
   'onboarding.take_me_to_session_replay_clicked':
     'Onboarding: Take Me to Session Replay Clicked',
+  'onboarding.slack_setup_clicked': 'Onboarding: Slack Setup Clicked',
 };

static/app/views/alerts/rules/issue/setupAlertIntegrationButton.tsx

@@ -6,6 +6,7 @@ import PluginIcon from 'sentry/plugins/components/pluginIcon';
 import ConfigStore from 'sentry/stores/configStore';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
+import {trackAnalytics} from 'sentry/utils/analytics';
 
 type Props = DeprecatedAsyncComponent['props'] & {
   organization: Organization;
@@ -66,6 +67,15 @@ export default class SetupAlertIntegrationButton extends DeprecatedAsyncComponen
       : {
           to: `/settings/${organization.slug}/integrations/slack/${referrerQuery}`,
         };
+
+    const onClickHandler = () => {
+      if (!isSelfHosted) {
+        trackAnalytics('onboarding.slack_setup_clicked', {
+          project_id: detailedProject.id,
+          organization,
+        });
+      }
+    };
     // TOOD(Steve): need to use the Tooltip component because adding a title to the button
     // puts the tooltip in the upper left hand corner of the page instead of the button
     return (
@@ -73,6 +83,7 @@ export default class SetupAlertIntegrationButton extends DeprecatedAsyncComponen
         <Button
           size="sm"
           icon={<PluginIcon pluginId="slack" size={16} />}
+          onClick={onClickHandler}
           {...buttonProps}
         >
           {t('Set Up Slack Now')}

static/app/views/settings/organizationIntegrations/integrationContext.tsx

@@ -11,6 +11,7 @@ export type IntegrationContextProps = {
       | 'messaging_integration_onboarding'
       | 'onboarding'
       | 'project_creation';
+    referrer?: string;
   };
   installStatus: string;
   provider: IntegrationProvider;

static/app/views/settings/organizationIntegrations/integrationDetailedView.tsx

@@ -241,6 +241,9 @@ class IntegrationDetailedView extends AbstractIntegrationDetailedView<
 
   renderTopButton(disabledFromFeatures: boolean, userHasAccess: boolean) {
     const provider = this.provider;
+    const location = this.props.location;
+    const queryParams = new URLSearchParams(location.search);
+    const referrer = queryParams.get('referrer');
 
     const buttonProps = {
       size: 'sm',
@@ -258,6 +261,7 @@ class IntegrationDetailedView extends AbstractIntegrationDetailedView<
           analyticsParams: {
             view: 'integrations_directory_integration_detail',
             already_installed: this.installationStatus !== 'Not Installed',
+            ...(referrer && {referrer}),
           },
         }}
       >