chore: Replace old onboarding metrics with Amplitude events (#3769)

Author: spalmurray-codecov

src/pages/RepoPage/BundlesTab/BundleOnboarding/BundleOnboarding.test.tsx

@@ -123,9 +123,6 @@ describe('BundleOnboarding', () => {
     mocks.useRedirect.mockImplementation((data) => ({
       hardRedirect: () => hardRedirect(data),
     }))
-    const mockMetricMutationVariables = vi.fn()
-    const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
-    mockGetItem.mockReturnValue(null)
 
     server.use(
       graphql.query('GetRepo', () => {
@@ -135,14 +132,10 @@ describe('BundleOnboarding', () => {
       }),
       graphql.query('GetOrgUploadToken', () => {
         return HttpResponse.json({ data: mockGetOrgUploadToken })
-      }),
-      graphql.mutation('storeEventMetric', (info) => {
-        mockMetricMutationVariables(info.variables)
-        return HttpResponse.json({ data: { storeEventMetric: null } })
       })
     )
 
-    return { hardRedirect, mockMetricMutationVariables, user }
+    return { hardRedirect, user }
   }
 
   it('renders intro', async () => {
@@ -163,7 +156,7 @@ describe('BundleOnboarding', () => {
   describe('navigation', () => {
     describe('when Vite is selected', () => {
       it('should navigate to /new', async () => {
-        const { user, mockMetricMutationVariables } = setup({})
+        const { user } = setup({})
         render(<BundleOnboarding />, {
           wrapper: wrapper('/gh/codecov/test-repo/bundles/new/rollup'),
         })
@@ -173,7 +166,6 @@ describe('BundleOnboarding', () => {
         expect(vite).toHaveAttribute('data-state', 'unchecked')
 
         await user.click(vite)
-        expect(mockMetricMutationVariables).toHaveBeenCalled()
 
         expect(vite).toBeInTheDocument()
         expect(vite).toHaveAttribute('data-state', 'checked')

src/pages/RepoPage/BundlesTab/BundleOnboarding/BundleOnboarding.tsx

@@ -1,13 +1,9 @@
-import { Suspense, useEffect } from 'react'
+import { Suspense } from 'react'
 import { Switch, useHistory, useLocation, useParams } from 'react-router-dom'
 
 import { SentryRoute } from 'sentry'
 
 import NotFound from 'pages/NotFound'
-import {
-  EVENT_METRICS,
-  useStoreCodecovEventMetric,
-} from 'services/codecovEventMetrics/useStoreCodecovEventMetric'
 import { useNavLinks } from 'services/navigation/useNavLinks'
 import { useRepo } from 'services/repo'
 import { Provider } from 'shared/api/helpers'
@@ -200,15 +196,6 @@ const BundleOnboarding: React.FC = () => {
   const { provider, owner, repo } = useParams<URLParams>()
   const { data } = useRepo({ provider, owner, repo })
   const { hardRedirect } = useRedirect({ href: `/${provider}` })
-  const { mutate: storeEventMetric } = useStoreCodecovEventMetric()
-
-  useEffect(() => {
-    storeEventMetric({
-      owner,
-      event: EVENT_METRICS.VISITED_PAGE,
-      jsonPayload: { page: 'Bundle Onboarding' },
-    })
-  }, [storeEventMetric, owner])
 
   // if no upload token redirect
   if (!data?.repository?.uploadToken) {

src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.test.tsx

@@ -6,8 +6,12 @@ import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { eventTracker } from 'services/events/events'
+
 import CircleCI from './CircleCI'
 
+vi.mock('services/events/events')
+
 const mockGetRepo = {
   owner: {
     isAdmin: null,
@@ -79,10 +83,6 @@ interface SetupArgs {
 
 describe('CircleCI', () => {
   function setup({ hasOrgUploadToken = false }: SetupArgs) {
-    const mockMetricMutationVariables = vi.fn()
-    const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
-    mockGetItem.mockReturnValue(null)
-
     server.use(
       graphql.query('GetRepo', () => {
         return HttpResponse.json({ data: mockGetRepo })
@@ -91,14 +91,10 @@ describe('CircleCI', () => {
         return HttpResponse.json({
           data: hasOrgUploadToken ? mockGetOrgUploadToken : mockNoUploadToken,
         })
-      }),
-      graphql.mutation('storeEventMetric', (info) => {
-        mockMetricMutationVariables(info?.variables)
-        return HttpResponse.json({ data: { storeEventMetric: null } })
       })
     )
     const user = userEvent.setup()
-    return { mockMetricMutationVariables, user }
+    return { user }
   }
 
   describe('output coverage step', () => {
@@ -329,8 +325,7 @@ describe('CircleCI', () => {
 
   describe('user copies text', () => {
     it('stores codecov metric', async () => {
-      // will be removing this stuff soon, backend for this doesn't exist anymore
-      const { mockMetricMutationVariables } = setup({})
+      setup({})
       const user = userEvent.setup()
       render(<CircleCI />, { wrapper })
 
@@ -339,12 +334,11 @@ describe('CircleCI', () => {
       )
       expect(copyCommands.length).toEqual(5)
 
-      await user.click(copyCommands[1] as HTMLElement)
+      const promises: Promise<void>[] = []
+      copyCommands.forEach((copy) => promises.push(user.click(copy)))
+      await Promise.all(promises)
 
-      await user.click(copyCommands[2] as HTMLElement)
-      await waitFor(() =>
-        expect(mockMetricMutationVariables).toHaveBeenCalledTimes(1)
-      )
+      await waitFor(() => expect(eventTracker().track).toHaveBeenCalledTimes(4))
     })
   })
 })

src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.tsx

@@ -2,10 +2,7 @@ import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import envVarScreenshot from 'assets/onboarding/env_variable_screenshot.png'
-import {
-  EVENT_METRICS,
-  useStoreCodecovEventMetric,
-} from 'services/codecovEventMetrics/useStoreCodecovEventMetric'
+import { eventTracker } from 'services/events/events'
 import { useOrgUploadToken } from 'services/orgUploadToken/useOrgUploadToken'
 import { useRepo } from 'services/repo'
 import { Provider } from 'shared/api/helpers'
@@ -62,7 +59,7 @@ function CircleCI() {
       <OutputCoverageStep
         framework={framework}
         frameworkInstructions={frameworkInstructions}
-        owner={owner}
+        ciProvider="CircleCI"
         setFramework={setFramework}
       />
       <TokenStep
@@ -87,8 +84,6 @@ interface TokenStepProps {
 }
 
 function TokenStep({ tokenCopy, uploadToken, providerName }: TokenStepProps) {
-  const { mutate: storeEventMetric } = useStoreCodecovEventMetric()
-  const { owner } = useParams<URLParams>()
   return (
     <Card>
       <Card.Header>
@@ -118,10 +113,14 @@ function TokenStep({ tokenCopy, uploadToken, providerName }: TokenStepProps) {
             className="basis-2/3"
             clipboard={uploadToken}
             clipboardOnClick={() =>
-              storeEventMetric({
-                owner,
-                event: EVENT_METRICS.COPIED_TEXT,
-                jsonPayload: { text: 'Step 1 CircleCI' },
+              eventTracker().track({
+                type: 'Button Clicked',
+                properties: {
+                  buttonName: 'Copy',
+                  buttonLocation: 'Coverage onboarding',
+                  ciProvider: 'CircleCI',
+                  copied: 'Upload token',
+                },
               })
             }
           >
@@ -152,8 +151,6 @@ interface OrbYAMLStepProps {
 }
 
 function OrbYAMLStep({ defaultBranch }: OrbYAMLStepProps) {
-  const { mutate: storeEventMetric } = useStoreCodecovEventMetric()
-  const { owner } = useParams<URLParams>()
   return (
     <Card>
       <Card.Header>
@@ -179,10 +176,14 @@ function OrbYAMLStep({ defaultBranch }: OrbYAMLStepProps) {
         <CodeSnippet
           clipboard={orbsString}
           clipboardOnClick={() =>
-            storeEventMetric({
-              owner,
-              event: EVENT_METRICS.COPIED_TEXT,
-              jsonPayload: { text: 'Step 2 CircleCI' },
+            eventTracker().track({
+              type: 'Button Clicked',
+              properties: {
+                buttonName: 'Copy',
+                buttonLocation: 'Coverage onboarding',
+                ciProvider: 'CircleCI',
+                copied: 'YAML snippet',
+              },
             })
           }
         >

src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.test.tsx

@@ -6,6 +6,7 @@ import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { eventTracker } from 'services/events/events'
 import { ThemeContextProvider } from 'shared/ThemeContext'
 
 import GitHubActions from './GitHubActions'
@@ -14,6 +15,7 @@ const mocks = vi.hoisted(() => ({
   useFlags: vi.fn(),
 }))
 
+vi.mock('services/events/events')
 vi.mock('shared/featureFlags', async () => {
   const actual = await vi.importActual('shared/featureFlags')
   return {
@@ -119,21 +121,13 @@ describe('GitHubActions', () => {
       newRepoFlag: hasOrgUploadToken,
     })
 
-    const mockMetricMutationVariables = vi.fn()
-    const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
-    mockGetItem.mockReturnValue(null)
-
     server.use(
       graphql.query('GetRepo', () => {
         return HttpResponse.json({ data: mockGetRepo })
       }),
       graphql.query('GetOrgUploadToken', () => {
         return HttpResponse.json({ data: mockGetOrgUploadToken })
       }),
-      graphql.mutation('storeEventMetric', (info) => {
-        mockMetricMutationVariables(info?.variables)
-        return HttpResponse.json({ data: { storeEventMetric: null } })
-      }),
       graphql.query('GetUploadTokenRequired', () => {
         return HttpResponse.json({ data: mockGetUploadTokenRequired })
       }),
@@ -146,7 +140,7 @@ describe('GitHubActions', () => {
     )
     const user = userEvent.setup()
 
-    return { mockMetricMutationVariables, user }
+    return { user }
   }
 
   describe('when Go is selected', () => {
@@ -210,22 +204,31 @@ describe('GitHubActions', () => {
   })
 
   describe('user copies text', () => {
-    it('stores codecov metric', async () => {
-      const { mockMetricMutationVariables } = setup({ hasOrgUploadToken: true })
+    it('tracks an event', async () => {
+      setup({ hasOrgUploadToken: true })
       const user = userEvent.setup()
       render(<GitHubActions />, { wrapper })
+
+      // Need to expand the example blurb dropdown
+      const trigger = await screen.findByText((content) =>
+        content.startsWith('Your final GitHub Actions workflow')
+      )
+      expect(trigger).toBeInTheDocument()
+
+      await user.click(trigger)
+
       const copyCommands = await screen.findAllByTestId(
         'clipboard-code-snippet'
       )
 
-      expect(copyCommands.length).toEqual(5)
+      expect(copyCommands.length).toEqual(6)
 
       const promises: Promise<void>[] = []
       copyCommands.forEach((copy) => promises.push(user.click(copy)))
       await Promise.all(promises)
 
       // One of the code-snippets does not have a metric associated with it
-      expect(mockMetricMutationVariables).toHaveBeenCalledTimes(4)
+      expect(eventTracker().track).toHaveBeenCalledTimes(5)
     })
   })
 })

src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.tsx

@@ -70,7 +70,7 @@ function GitHubActions() {
       <OutputCoverageStep
         framework={framework}
         frameworkInstructions={frameworkInstructions}
-        owner={owner}
+        ciProvider="GitHub Actions"
         setFramework={setFramework}
       />
       <TokenStep

src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx

@@ -1,16 +1,11 @@
-import { UseMutateFunction } from '@tanstack/react-query'
 import { useParams } from 'react-router-dom'
 
 import orgSecretDark from 'assets/onboarding/org_secret_dark.png'
 import orgSecretLight from 'assets/onboarding/org_secret_light.png'
 import repoSecretDark from 'assets/onboarding/repo_secret_dark.png'
 import repoSecretLight from 'assets/onboarding/repo_secret_light.png'
 import useGenerateOrgUploadToken from 'pages/AccountSettings/tabs/OrgUploadToken/useGenerateOrgUploadToken'
-import {
-  EVENT_METRICS,
-  StoreEventMetricMutationArgs,
-  useStoreCodecovEventMetric,
-} from 'services/codecovEventMetrics/useStoreCodecovEventMetric'
+import { eventTracker } from 'services/events/events'
 import { useOrgUploadToken } from 'services/orgUploadToken/useOrgUploadToken'
 import { useRepo } from 'services/repo'
 import { useUploadTokenRequired } from 'services/uploadTokenRequired'
@@ -37,21 +32,12 @@ interface URLParams {
 
 interface SecretGHExampleProps {
   isUsingGlobalToken: boolean
-  owner: string
-  storeEventMetric: UseMutateFunction<
-    any,
-    unknown,
-    StoreEventMetricMutationArgs,
-    unknown
-  >
   uploadToken: string
 }
 
 function GitHubOrgSecretExample({
   isUsingGlobalToken,
-  storeEventMetric,
   uploadToken,
-  owner,
 }: SecretGHExampleProps) {
   return (
     <>
@@ -72,10 +58,14 @@ function GitHubOrgSecretExample({
           className="basis-2/3"
           clipboard={uploadToken}
           clipboardOnClick={() =>
-            storeEventMetric({
-              owner,
-              event: EVENT_METRICS.COPIED_TEXT,
-              jsonPayload: { text: 'GHA token copied' },
+            eventTracker().track({
+              type: 'Button Clicked',
+              properties: {
+                buttonName: 'Copy',
+                buttonLocation: 'Coverage onboarding',
+                ciProvider: 'GitHub Actions',
+                copied: 'Upload token',
+              },
             })
           }
         >
@@ -197,7 +187,6 @@ const AddTokenStep = ({
   })
   const { data } = useRepo({ provider, owner, repo })
   const repoUploadToken = data?.repository?.uploadToken ?? ''
-  const { mutate: storeEventMetric } = useStoreCodecovEventMetric()
   return (
     <Card>
       <Card.Header>
@@ -225,8 +214,6 @@ const AddTokenStep = ({
       <Card.Content className="flex flex-col gap-4">
         <GitHubOrgSecretExample
           isUsingGlobalToken={isUsingGlobalToken}
-          owner={owner}
-          storeEventMetric={storeEventMetric}
           uploadToken={
             isUsingGlobalToken ? (orgUploadToken ?? '') : repoUploadToken
           }