Convert EventTracker to abstract class and object payloads

Author: spalmurray

src/layouts/Header/components/UserDropdown/UserDropdown.tsx

@@ -36,7 +36,7 @@ function UserDropdown() {
   })
 
   const { provider, owner, repo } = useParams<URLParams>()
-  const isGh = providerToName(provider) === 'Github'
+  const isGh = providerToName(provider) === 'GitHub'
   const history = useHistory()
 
   const items =
@@ -46,9 +46,12 @@ function UserDropdown() {
             to: { pageName: 'codecovAppInstallation' },
             children: 'Install Codecov app',
             onClick: () =>
-              eventTracker(provider, owner, repo).track('Button Clicked', {
-                buttonType: 'Install Github App',
-                buttonLocation: 'UserDropdown',
+              eventTracker(provider, owner, repo).track({
+                type: 'Button Clicked',
+                properties: {
+                  buttonType: 'Install Github App',
+                  buttonLocation: 'UserDropdown',
+                },
               }),
           } as DropdownItem,
         ]

src/pages/OwnerPage/HeaderBanners/GithubConfigBanner/GithubConfigBanner.jsx

@@ -1,13 +1,14 @@
 import { useParams } from 'react-router-dom'
 
+import { eventTracker } from 'services/events/events'
 import { providerToName } from 'shared/utils/provider'
 import A from 'ui/A'
 import Banner from 'ui/Banner'
 import BannerContent from 'ui/Banner/BannerContent'
 import BannerHeading from 'ui/Banner/BannerHeading'
 
 const GithubConfigBanner = () => {
-  const { provider } = useParams()
+  const { provider, owner } = useParams()
   const isGh = providerToName(provider) === 'GitHub'
 
   if (!isGh) return null
@@ -21,6 +22,15 @@ const GithubConfigBanner = () => {
             <A
               data-testid="codecovGithubApp-link"
               to={{ pageName: 'codecovGithubAppSelectTarget' }}
+              onClick={() =>
+                eventTracker(provider, owner).track({
+                  type: 'Button Clicked',
+                  properties: {
+                    buttonType: 'Install Github App',
+                    buttonLocation: 'GithubConfigBanner',
+                  },
+                })
+              }
             >
               Codecov&apos;s GitHub app
             </A>

src/services/events/amplitude/amplitude.ts

@@ -7,6 +7,7 @@ import {
 } from 'shared/utils/provider'
 
 import { EventTracker } from '../events'
+import { Event } from '../types'
 
 const AMPLITUDE_API_KEY = process.env.REACT_APP_AMPLITUDE_API_KEY
 
@@ -42,7 +43,13 @@ export class AmplitudeEventTracker implements EventTracker {
     this.#repo = repo
   }
 
-  identify(userOwnerId: number | string, username: string) {
+  identify({
+    userOwnerId,
+    username,
+  }: {
+    userOwnerId: number
+    username: string
+  }) {
     amplitude.setUserId(userOwnerId.toString())
     const identifyEvent = new amplitude.Identify()
     if (this.#provider) {
@@ -52,15 +59,15 @@ export class AmplitudeEventTracker implements EventTracker {
     amplitude.identify(identifyEvent)
   }
 
-  track(eventType: string, eventProperties: any) {
+  track(event: Event) {
     amplitude.track({
       // eslint-disable-next-line camelcase
-      event_type: eventType,
+      event_type: event.type,
       // eslint-disable-next-line camelcase
       event_properties: {
         owner: this.#providerOwner,
         repo: this.#repo,
-        ...eventProperties,
+        ...event.properties,
       },
       // This attaches the event to the owner's user group as well
       groups: this.#providerOwner

src/services/events/events.ts

@@ -2,31 +2,29 @@ import { Provider } from 'shared/api/helpers'
 
 import { AmplitudeEventTracker, initAmplitude } from './amplitude/amplitude'
 import { StubbedEventTracker } from './stub'
+import { Event } from './types'
 
 const AMPLITUDE_API_KEY = process.env.REACT_APP_AMPLITUDE_API_KEY
 
-export interface EventTracker {
+export abstract class EventTracker {
   // Identifies the user this session belongs to.
-  identify(userOwnerId: number, username: string): void
+  identify({
+    userOwnerId: _userOwnerId,
+    username: _username,
+  }: {
+    userOwnerId: number
+    username: string
+  }): void {
+    throw new Error(
+      'EventTracker is abstract. Method identify must be implemented.'
+    )
+  }
 
-  // Add new events as a new overloaded method signature here.
-  // Please keep the `eventType`s very generic as we have a limited number of
-  // them. Instead, add more detail in `eventProperties` where possible.
-  // Adding event types this way provides type safety for event properties.
-  // E.g., every 'Button Clicked' event must have the buttonType property.
-  track(
-    eventType: 'Button Clicked',
-    eventProperties: {
-      buttonType: 'Install Github App' | 'Configure Repo'
-      buttonLocation?: string
-    }
-  ): void
-  track(
-    eventType: 'Page Viewed',
-    eventProperties: {
-      pageName: 'OwnerPage'
-    }
-  ): void
+  track(_event: Event): void {
+    throw new Error(
+      'EventTracker is abstract. Method track must be implemented.'
+    )
+  }
 }
 
 export function initEventTracker(): void {

src/services/events/stub.ts

@@ -1,6 +1,13 @@
 import { EventTracker } from './events'
+import { Event } from './types'
 
 export class StubbedEventTracker implements EventTracker {
-  identify(_userOwnerId: string | number, _username: string): void {}
-  track(_eventType: string, _eventProperties: any): void {}
+  identify({
+    userOwnerId: _userOwnerId,
+    username: _username,
+  }: {
+    userOwnerId: number
+    username: string
+  }): void {}
+  track(_event: Event): void {}
 }

src/services/events/types.ts

@@ -0,0 +1,21 @@
+// Add new events to the union type here.
+// Please keep the values of `type` very generic as we have a limited number of
+// them. Instead, add more detail in `properties` where possible.
+// Adding event types this way provides type safety for names and event
+// properties.
+// E.g., every 'Button Clicked' event must have the buttonType property.
+
+export type Event =
+  | {
+      type: 'Button Clicked'
+      properties: {
+        buttonType: 'Install Github App' | 'Configure Repo'
+        buttonLocation?: string
+      }
+    }
+  | {
+      type: 'Page Viewed'
+      properties: {
+        pageName: 'OwnerPage'
+      }
+    }

src/services/user/useUser.ts

@@ -167,10 +167,10 @@ export function useUser({ options }: UseUserArgs = {}) {
           parsedRes.data.me?.owner.ownerid &&
           parsedRes.data.me?.owner.username
         ) {
-          eventTracker(provider).identify(
-            parsedRes.data.me.owner.ownerid,
-            parsedRes.data.me.owner.username
-          )
+          eventTracker(provider).identify({
+            userOwnerId: parsedRes.data.me.owner.ownerid,
+            username: parsedRes.data.me.owner.username,
+          })
         }
 
         return parsedRes.data.me

src/shared/ListRepo/InactiveRepo/InactiveRepo.tsx

@@ -32,8 +32,11 @@ function InactiveRepo({
         },
       }}
       onClick={() =>
-        eventTracker(provider, owner, repoName).track('Button Clicked', {
-          buttonType: 'Configure Repo',
+        eventTracker(provider, owner, repoName).track({
+          type: 'Button Clicked',
+          properties: {
+            buttonType: 'Configure Repo',
+          },
         })
       }
     >

src/ui/ContextSwitcher/ContextSwitcher.tsx

@@ -171,7 +171,7 @@ function ContextSwitcher({
   const intersectionRef = useLoadMore({ onLoadMore })
   const defaultOrgUsername = currentUser?.defaultOrgUsername
 
-  const isGh = providerToName(provider) === 'Github'
+  const isGh = providerToName(provider) === 'GitHub'
   const isSelfHosted = config.IS_SELF_HOSTED
   const isCustomGitHubApp = config.GH_APP !== DEFAULT_GH_APP
 
@@ -219,9 +219,12 @@ function ContextSwitcher({
             <A
               to={{ pageName: 'codecovAppInstallation' }}
               onClick={() =>
-                eventTracker(provider, owner).track('Button Clicked', {
-                  buttonType: 'Install Github App',
-                  buttonLocation: 'ContextSwitcher',
+                eventTracker(provider, owner).track({
+                  type: 'Button Clicked',
+                  properties: {
+                    buttonType: 'Install Github App',
+                    buttonLocation: 'ContextSwitcher',
+                  },
                 })
               }
               isExternal