Merge branch 'main' into cy/light_dark_switch

src/index.tsx

@@ -12,6 +12,7 @@ import { Router } from 'react-router-dom'
 import { CompatRouter } from 'react-router-dom-v5-compat'
 
 import ErrorBoundary from 'layouts/shared/ErrorBoundary'
+import { initEventTracker } from 'services/events/events'
 import { withFeatureFlagProvider } from 'shared/featureFlags'
 
 import App from './App'
@@ -38,6 +39,7 @@ const history = createBrowserHistory()
 
 const TOO_MANY_REQUESTS_ERROR_CODE = 429
 
+initEventTracker()
 setupSentry({ history })
 
 const queryClient = new QueryClient({

src/layouts/BaseLayout/BaseLayout.test.tsx

@@ -170,6 +170,22 @@ const mockNavigatorData = {
   },
 }
 
+const mockOwnerContext = {
+  owner: {
+    ownerid: 123,
+  },
+}
+
+const mockRepoContext = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      repoid: 321,
+      private: false,
+    },
+  },
+}
+
 const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -288,6 +304,14 @@ describe('BaseLayout', () => {
       graphql.query('NavigatorData', () => {
         return HttpResponse.json({ data: mockNavigatorData })
       }),
+      graphql.query('OwnerContext', () => {
+        return HttpResponse.json({ data: mockOwnerContext })
+      }),
+      graphql.query('RepoContext', () => {
+        return HttpResponse.json({
+          data: mockRepoContext,
+        })
+      }),
       http.get('/internal/users/current', () => {
         return HttpResponse.json({})
       })

src/layouts/BaseLayout/BaseLayout.tsx

@@ -10,6 +10,7 @@ import NetworkErrorBoundary from 'layouts/shared/NetworkErrorBoundary'
 import SilentNetworkErrorWrapper from 'layouts/shared/SilentNetworkErrorWrapper'
 import ToastNotifications from 'layouts/ToastNotifications'
 import { RepoBreadcrumbProvider } from 'pages/RepoPage/context'
+import { useEventContext } from 'services/events/hooks'
 import { useImpersonate } from 'services/impersonate'
 import { useTracking } from 'services/tracking'
 import GlobalBanners from 'shared/GlobalBanners'
@@ -77,6 +78,7 @@ interface URLParams {
 function BaseLayout({ children }: React.PropsWithChildren) {
   const { provider, owner, repo } = useParams<URLParams>()
   useTracking()
+  useEventContext()
   const { isImpersonating } = useImpersonate()
   const {
     isFullExperience,

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

@@ -8,6 +8,7 @@ import { type Mock } from 'vitest'
 
 import config from 'config'
 
+import { eventTracker } from 'services/events/events'
 import { useImage } from 'services/image'
 import { Plans } from 'shared/utils/billing'
 
@@ -60,6 +61,7 @@ const mockUser = {
 vi.mock('services/image')
 vi.mock('config')
 vi.mock('js-cookie')
+vi.mock('services/events/events')
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -214,6 +216,39 @@ describe('UserDropdown', () => {
           'https://github.com/apps/codecov/installations/new'
         )
       })
+
+      describe('when app access link is clicked', () => {
+        it('tracks a Button Clicked event', async () => {
+          const { user } = setup()
+          render(<UserDropdown />, {
+            wrapper: wrapper(),
+          })
+
+          expect(
+            screen.queryByText('Install Codecov app')
+          ).not.toBeInTheDocument()
+
+          const openSelect = await screen.findByTestId('user-dropdown-trigger')
+          await user.click(openSelect)
+
+          const link = screen.getByText('Install Codecov app')
+          expect(link).toBeVisible()
+          expect(link).toHaveAttribute(
+            'href',
+            'https://github.com/apps/codecov/installations/new'
+          )
+
+          await user.click(link)
+
+          expect(eventTracker().track).toHaveBeenCalledWith({
+            type: 'Button Clicked',
+            properties: {
+              buttonName: 'Install GitHub App',
+              buttonLocation: 'User dropdown',
+            },
+          })
+        })
+      })
     })
   })
   describe('when not on GitHub', () => {

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

@@ -2,6 +2,7 @@ import { useHistory, useParams } from 'react-router-dom'
 
 import config from 'config'
 
+import { eventTracker } from 'services/events/events'
 import { useUser } from 'services/user'
 import { Provider } from 'shared/api/helpers'
 import { providerToName } from 'shared/utils/provider'
@@ -42,6 +43,14 @@ function UserDropdown() {
           {
             to: { pageName: 'codecovAppInstallation' },
             children: 'Install Codecov app',
+            onClick: () =>
+              eventTracker().track({
+                type: 'Button Clicked',
+                properties: {
+                  buttonName: 'Install GitHub App',
+                  buttonLocation: 'User dropdown',
+                },
+              }),
           } as DropdownItem,
         ]
       : []

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

@@ -1,5 +1,6 @@
 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'
@@ -21,6 +22,15 @@ const GithubConfigBanner = () => {
             <A
               data-testid="codecovGithubApp-link"
               to={{ pageName: 'codecovGithubAppSelectTarget' }}
+              onClick={() =>
+                eventTracker().track({
+                  type: 'Button Clicked',
+                  properties: {
+                    buttonName: 'Install GitHub App',
+                    buttonLocation: 'Configure GitHub app banner',
+                  },
+                })
+              }
             >
               Codecov&apos;s GitHub app
             </A>

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

@@ -1,8 +1,12 @@
-import { render, screen } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 import { MemoryRouter, Route, Switch } from 'react-router-dom'
 
+import { eventTracker } from 'services/events/events'
+
 import GithubConfigBanner from './GithubConfigBanner'
 
+vi.mock('services/events/events')
+
 const wrapper =
   ({ provider = 'gh' }) =>
   ({ children }) => {
@@ -34,6 +38,27 @@ describe('GithubConfigBanner', () => {
       )
       expect(body).toBeInTheDocument()
     })
+
+    describe('and button is clicked', () => {
+      it('tracks a Button Clicked event', async () => {
+        render(<GithubConfigBanner />, {
+          wrapper: wrapper({ provider: 'gh' }),
+        })
+
+        const title = screen.getByText(/Codecov's GitHub app/)
+        expect(title).toBeInTheDocument()
+
+        act(() => title.click())
+
+        expect(eventTracker().track).toHaveBeenCalledWith({
+          type: 'Button Clicked',
+          properties: {
+            buttonName: 'Install GitHub App',
+            buttonLocation: 'Configure GitHub app banner',
+          },
+        })
+      })
+    })
   })
 
   describe('when rendered with other providers', () => {

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/BillingDetails.tsx

@@ -30,7 +30,7 @@ function BillingDetails() {
       <EmailAddress />
       <PaymentCard
         // @ts-expect-error - TODO fix this once we update PaymentCard to TS
-        subscriptionDetail={subscriptionDetail}
+        accountDetails={accountDetails}
         provider={provider}
         owner={owner}
       />

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useState } from 'react'
 
-import { subscriptionDetailType } from 'services/account'
+import { accountDetailsPropType } from 'services/account'
 import { formatTimestampToCalendarDate } from 'shared/utils/billing'
 import A from 'ui/A'
 import Button from 'ui/Button'
@@ -10,8 +10,9 @@ import Icon from 'ui/Icon'
 import BankInformation from './BankInformation'
 import CardInformation from './CardInformation'
 import PaymentMethodForm from './PaymentMethodForm'
-function PaymentCard({ subscriptionDetail, provider, owner }) {
+function PaymentCard({ accountDetails, provider, owner }) {
   const [isFormOpen, setIsFormOpen] = useState(false)
+  const subscriptionDetail = accountDetails?.subscriptionDetail
   const card = subscriptionDetail?.defaultPaymentMethod?.card
   const usBankAccount = subscriptionDetail?.defaultPaymentMethod?.usBankAccount
 
@@ -41,7 +42,7 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
           provider={provider}
           owner={owner}
           closeForm={() => setIsFormOpen(false)}
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
         />
       ) : card ? (
         <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
@@ -72,7 +73,7 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
 }
 
 PaymentCard.propTypes = {
-  subscriptionDetail: subscriptionDetailType,
+  accountDetails: accountDetailsPropType,
   provider: PropTypes.string.isRequired,
   owner: PropTypes.string.isRequired,
 }