ref(onboarding): Add amplitude code to track project removal (#48418)

static/app/components/confirm.tsx

@@ -81,6 +81,10 @@ export type OpenConfirmOptions = {
    * User cancels the modal
    */
   onCancel?: () => void;
+  /**
+   * User closes the modal
+   */
+  onClose?: () => void;
   /**
    * Callback when user confirms
    */
@@ -90,6 +94,10 @@ export type OpenConfirmOptions = {
    * confirm modal is opened
    */
   onConfirming?: () => void;
+  /**
+   * Modal is rendered
+   */
+  onRender?: () => void;
   /**
    * Button priority
    */
@@ -136,6 +144,7 @@ export const openConfirmModal = ({
   cancelText = t('Cancel'),
   confirmText = t('Confirm'),
   disableConfirmButton = false,
+  onClose,
   ...rest
 }: OpenConfirmOptions) => {
   if (bypass) {
@@ -152,7 +161,7 @@ export const openConfirmModal = ({
   };
 
   onConfirming?.();
-  openModal(renderProps => <ConfirmModal {...renderProps} {...modalProps} />);
+  openModal(renderProps => <ConfirmModal {...renderProps} {...modalProps} />, {onClose});
 };
 
 /**
@@ -205,6 +214,7 @@ type ModalProps = ModalRenderProps &
     | 'onConfirm'
     | 'onCancel'
     | 'disableConfirmButton'
+    | 'onRender'
   >;
 
 type ModalState = {
@@ -224,6 +234,10 @@ class ConfirmModal extends Component<ModalProps, ModalState> {
     confirmCallback: null,
   };
 
+  componentDidMount() {
+    this.props.onRender?.();
+  }
+
   confirming: boolean = false;
 
   handleClose = () => {

static/app/utils/analytics/onboardingAnalyticsEvents.tsx

@@ -3,6 +3,23 @@ export type OnboardingEventParameters = {
     from: string;
     to: string;
   };
+  'onboarding.data_removal_modal_confirm_button_clicked': {
+    platform: string;
+    project_id: string;
+  };
+  'onboarding.data_removal_modal_dismissed': {
+    platform: string;
+    project_id: string;
+  };
+  'onboarding.data_removal_modal_rendered': {
+    platform: string;
+    project_id: string;
+  };
+  'onboarding.data_removed': {
+    date_created: string;
+    platform: string;
+    project_id: string;
+  };
   'onboarding.explore_sentry_button_clicked': {
     platform: string;
     project_id: string;
@@ -74,4 +91,9 @@ export const onboardingEventMap: Record<keyof OnboardingEventParameters, string>
   'onboarding.select_framework_modal_rendered': 'Onboarding: Framework Modal Rendered',
   'onboarding.select_framework_modal_skip_button_clicked':
     'Onboarding: Framework Modal Skip Button Clicked',
+  'onboarding.data_removal_modal_dismissed': 'Onboarding: Data Removal Modal Dismissed',
+  'onboarding.data_removal_modal_confirm_button_clicked':
+    'Onboarding: Data Removal Modal Confirm Button Clicked',
+  'onboarding.data_removal_modal_rendered': 'Onboarding: Data Removal Modal Rendered',
+  'onboarding.data_removed': 'Onboarding: Data Removed',
 };

static/app/views/onboarding/onboarding.tsx

@@ -203,11 +203,18 @@ function Onboarding(props: Props) {
         ...onboardingContext.data,
         projects: newProjects,
       });
+
+      trackAnalytics('onboarding.data_removed', {
+        organization,
+        date_created: recentCreatedProject.dateCreated,
+        platform: recentCreatedProject.slug,
+        project_id: recentCreatedProject.id,
+      });
     } catch (error) {
       handleXhrErrorResponse(t('Unable to delete project in onboarding'))(error);
       // we don't give the user any feedback regarding this error as this shall be silent
     }
-  }, [api, organization.slug, recentCreatedProject?.slug, onboardingContext]);
+  }, [api, organization, recentCreatedProject, onboardingContext]);
 
   const handleGoBack = useCallback(
     (goToStepIndex?: number) => {
@@ -245,6 +252,11 @@ function Onboarding(props: Props) {
 
       // from setup docs to selected platform
       if (onboardingSteps[stepIndex].id === 'setup-docs' && shallProjectBeDeleted) {
+        trackAnalytics('onboarding.data_removal_modal_confirm_button_clicked', {
+          organization,
+          platform: recentCreatedProject.slug,
+          project_id: recentCreatedProject.id,
+        });
         deleteRecentCreatedProject();
       }
 
@@ -262,6 +274,7 @@ function Onboarding(props: Props) {
       onboardingContext,
       shallProjectBeDeleted,
       deleteRecentCreatedProject,
+      recentCreatedProject,
     ]
   );
 
@@ -300,6 +313,28 @@ function Onboarding(props: Props) {
     priority: 'danger',
     confirmText: t("Yes I'm sure. Take me back"),
     onConfirm: handleGoBack,
+    onClose: () => {
+      if (!recentCreatedProject) {
+        return;
+      }
+
+      trackAnalytics('onboarding.data_removal_modal_dismissed', {
+        organization,
+        platform: recentCreatedProject.slug,
+        project_id: recentCreatedProject.id,
+      });
+    },
+    onRender: () => {
+      if (!recentCreatedProject) {
+        return;
+      }
+
+      trackAnalytics('onboarding.data_removal_modal_rendered', {
+        organization,
+        platform: recentCreatedProject.slug,
+        project_id: recentCreatedProject.id,
+      });
+    },
   };
 
   return (