chore(github-growth): FE analytics (#56173)

static/app/components/modals/inviteMissingMembersModal/index.tsx

@@ -284,6 +284,11 @@ export function InviteMissingMembersModal({
             aria-label={t('Send Invites')}
             onClick={sendInvites}
             disabled={!canSend || selectedCount === 0}
+            analyticsEventName="Github Invite Modal: Invite"
+            analyticsEventKey="github_invite_modal.invite"
+            analyticsParams={{
+              invited_all: memberInvites.length === selectedCount,
+            }}
           >
             {inviteButtonLabel()}
           </Button>

static/app/utils/analytics/growthAnalyticsEvents.tsx

@@ -62,6 +62,8 @@ export type GrowthEventParameters = {
   'assistant.guide_finished': {
     guide: string;
   };
+  'github_invite_banner.snoozed': {};
+  'github_invite_banner.viewed': {};
   'growth.clicked_enter_sandbox': {
     scenario: string;
     source?: string;
@@ -153,6 +155,8 @@ type GrowthAnalyticsKey = keyof GrowthEventParameters;
 export const growthEventMap: Record<GrowthAnalyticsKey, string | null> = {
   'assistant.guide_finished': 'Assistant Guide Finished',
   'assistant.guide_dismissed': 'Assistant Guide Dismissed',
+  'github_invite_banner.snoozed': 'Github Invite Banner Snoozed',
+  'github_invite_banner.viewed': 'Github Invite Banner Viewed',
   'growth.clicked_mobile_prompt_setup_project':
     'Growth: Clicked Mobile Prompt Setup Project',
   'growth.clicked_mobile_prompt_ask_teammate':

static/app/views/settings/organizationMembers/inviteBanner.tsx

@@ -16,6 +16,7 @@ import {IconCommit, IconEllipsis, IconGithub, IconMail} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {MissingMember, Organization, OrgRole} from 'sentry/types';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {promptIsDismissed} from 'sentry/utils/promptIsDismissed';
 import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -38,11 +39,10 @@ export function InviteBanner({
 }: Props) {
   // NOTE: this is currently used for Github only
 
-  const hideBanner =
-    !organization.features.includes('integrations-gh-invite') ||
-    !organization.access.includes('org:write') ||
-    !missingMembers?.users ||
-    missingMembers?.users.length === 0;
+  const isEligibleForBanner =
+    organization.features.includes('integrations-gh-invite') &&
+    organization.access.includes('org:write') &&
+    missingMembers?.users?.length > 0;
   const [sendingInvite, setSendingInvite] = useState<boolean>(false);
   const [showBanner, setShowBanner] = useState<boolean>(false);
 
@@ -52,6 +52,9 @@ export function InviteBanner({
   const location = useLocation();
 
   const snoozePrompt = useCallback(async () => {
+    trackAnalytics('github_invite_banner.snoozed', {
+      organization,
+    });
     setShowBanner(false);
     await promptsUpdate(api, {
       organizationId: organization.id,
@@ -70,7 +73,7 @@ export function InviteBanner({
   }, [allowedRoles, missingMembers, organization, onModalClose]);
 
   useEffect(() => {
-    if (hideBanner) {
+    if (!isEligibleForBanner) {
       return;
     }
     promptsCheck(api, {
@@ -79,17 +82,22 @@ export function InviteBanner({
     }).then(prompt => {
       setShowBanner(!promptIsDismissed(prompt));
     });
-  }, [api, organization, promptsFeature, hideBanner]);
+  }, [api, organization, promptsFeature, isEligibleForBanner]);
 
   useEffect(() => {
     const {inviteMissingMembers} = qs.parse(location.search);
 
-    if (!hideBanner && inviteMissingMembers) {
+    if (isEligibleForBanner && inviteMissingMembers) {
       openInviteModal();
     }
-  }, [openInviteModal, location, hideBanner]);
+  }, [openInviteModal, location, isEligibleForBanner]);
 
-  if (hideBanner || !showBanner) {
+  if (isEligibleForBanner && showBanner) {
+    trackAnalytics('github_invite_banner.viewed', {
+      organization,
+    });
+  }
+  if (!isEligibleForBanner || !showBanner) {
     return null;
   }
 
@@ -144,6 +152,8 @@ export function InviteBanner({
           onClick={() => handleSendInvite(member.email)}
           data-test-id="invite-missing-member"
           icon={<IconMail />}
+          analyticsEventName="Github Invite Banner: Invite"
+          analyticsEventKey="github_invite_banner.invite"
         >
           {t('Invite')}
         </Button>
@@ -177,7 +187,13 @@ export function InviteBanner({
           </Subtitle>
         </CardTitleContent>
         <ButtonBar gap={1}>
-          <Button priority="primary" size="xs" onClick={openInviteModal}>
+          <Button
+            priority="primary"
+            size="xs"
+            onClick={openInviteModal}
+            analyticsEventName="Github Invite Banner: View All"
+            analyticsEventKey="github_invite_banner.view_all"
+          >
             {t('View All')}
           </Button>
           <DropdownMenu
@@ -222,7 +238,13 @@ function SeeMoreCard({missingMembers, openInviteModal}: SeeMoreCardProps) {
           })}
         </Subtitle>
       </MemberCardContent>
-      <Button size="sm" priority="primary" onClick={openInviteModal}>
+      <Button
+        size="sm"
+        priority="primary"
+        onClick={openInviteModal}
+        analyticsEventName="Github Invite Banner: View All"
+        analyticsEventKey="github_invite_banner.view_all"
+      >
         {t('View All')}
       </Button>
     </MemberCard>