Merge pull request #12528 from overleaf/jpa-switch-dashboard-events-to-bq

[web] switch events on project dashboard to BQ

GitOrigin-RevId: 9326c19cc5663c4dc2919877eb8df91e312bb902

services/web/frontend/js/features/project-list/components/modals/projects-action-modal.tsx

@@ -57,11 +57,7 @@ function ProjectsActionModal({
 
   useEffect(() => {
     if (showModal) {
-      eventTracking.send(
-        'project-list-page-interaction',
-        'project action',
-        action
-      )
+      eventTracking.sendMB('project-list-page-interaction', { action })
     }
   }, [action, showModal])
 

services/web/frontend/js/features/project-list/components/modals/rename-project-modal.tsx

@@ -34,11 +34,9 @@ function RenameProjectModal({
 
   useEffect(() => {
     if (showModal) {
-      eventTracking.send(
-        'project-list-page-interaction',
-        'project action',
-        'Rename'
-      )
+      eventTracking.sendMB('project-list-page-interaction', {
+        action: 'rename',
+      })
     }
   }, [showModal])
 

services/web/frontend/js/features/project-list/components/search-form.tsx

@@ -36,11 +36,7 @@ function SearchForm({
       HTMLInputElement & Omit<FormControl, keyof HTMLInputElement>
     >
   ) => {
-    eventTracking.send(
-      'project-list-page-interaction',
-      'project-search',
-      'keydown'
-    )
+    eventTracking.sendMB('project-list-page-interaction', { action: 'search' })
     setInputValue(e.target.value)
   }
 

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx

@@ -33,11 +33,7 @@ function CopyProjectButton({ project, children }: CopyButtonProps) {
 
   const handleAfterCloned = useCallback(
     clonedProject => {
-      eventTracking.send(
-        'project-list-page-interaction',
-        'project action',
-        'Clone'
-      )
+      eventTracking.sendMB('project-list-page-interaction', { action: 'clone' })
       addClonedProjectToViewData(clonedProject)
       updateProjectViewData({ ...project, selected: false })
       setShowModal(false)

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx

@@ -20,11 +20,9 @@ function DownloadProjectButton({
   const location = useLocation()
 
   const downloadProject = useCallback(() => {
-    eventTracking.send(
-      'project-list-page-interaction',
-      'project action',
-      'Download Zip'
-    )
+    eventTracking.sendMB('project-list-page-interaction', {
+      action: 'downloadZip',
+    })
     location.assign(`/project/${project.id}/download/zip`)
   }, [project, location])
 

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx

@@ -16,11 +16,9 @@ function DownloadProjectsButton() {
   const projectIds = selectedProjects.map(p => p.id)
 
   const handleDownloadProjects = useCallback(() => {
-    eventTracking.send(
-      'project-list-page-interaction',
-      'project action',
-      'Download Zip'
-    )
+    eventTracking.sendMB('project-list-page-interaction', {
+      action: 'downloadZips',
+    })
 
     location.assign(`/project/download/zip?project_ids=${projectIds.join(',')}`)
 

services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/copy-project-menu-item.tsx

@@ -31,11 +31,7 @@ function CopyProjectMenuItem() {
   const handleAfterCloned = useCallback(
     (clonedProject: Project) => {
       const project = selectedProjects[0]
-      eventTracking.send(
-        'project-list-page-interaction',
-        'project action',
-        'Clone'
-      )
+      eventTracking.sendMB('project-list-page-interaction', { action: 'clone' })
       addClonedProjectToViewData(clonedProject)
       updateProjectViewData({ ...project, selected: false })
 

services/web/test/frontend/features/project-list/components/current-plan-widget.test.tsx

@@ -16,16 +16,18 @@ describe('<CurrentPlanWidget />', function () {
   const paidPlanTooltipMessage =
     /click to find out how to make the most of your overleaf premium features/i
 
+  let sendMBSpy: sinon.SinonSpy
+
   beforeEach(function () {
+    sendMBSpy = sinon.spy(eventTracking, 'sendMB')
     window.metaAttributesCache = window.metaAttributesCache || new Map()
   })
+  afterEach(function () {
+    sendMBSpy.restore()
+  })
 
   describe('free plan', function () {
-    let sendMBSpy: sinon.SinonSpy
-
     beforeEach(function () {
-      sendMBSpy = sinon.spy(eventTracking, 'sendMB')
-
       window.metaAttributesCache.set('ol-usersBestSubscription', {
         type: 'free',
       })
@@ -33,10 +35,6 @@ describe('<CurrentPlanWidget />', function () {
       render(<CurrentPlanWidget />)
     })
 
-    afterEach(function () {
-      sendMBSpy.restore()
-    })
-
     it('shows text and tooltip on mouseover', function () {
       const link = screen.getByRole('link', {
         name: /you’re on the free plan/i,
@@ -249,8 +247,6 @@ describe('<CurrentPlanWidget />', function () {
   })
 
   describe('features page split test', function () {
-    let sendMBSpy: sinon.SinonSpy
-
     const variants = [
       { name: 'default', link: '/learn/how-to/Overleaf_premium_features' },
       { name: 'new', link: '/about/features-overview' },
@@ -285,14 +281,6 @@ describe('<CurrentPlanWidget />', function () {
       },
     ]
 
-    beforeEach(function () {
-      sendMBSpy = sinon.spy(eventTracking, 'sendMB')
-    })
-
-    afterEach(function () {
-      sendMBSpy.restore()
-    })
-
     for (const variant of variants) {
       describe(`${variant.name} variant`, function () {
         beforeEach(function () {

services/web/test/frontend/features/project-list/components/project-list-root.test.tsx

@@ -25,12 +25,12 @@ const {
 const userId = owner.id
 
 describe('<ProjectListRoot />', function () {
-  let sendSpy: sinon.SinonSpy
+  let sendMBSpy: sinon.SinonSpy
   let assignStub: sinon.SinonStub
 
   beforeEach(async function () {
     global.localStorage.clear()
-    sendSpy = sinon.spy(eventTracking, 'send')
+    sendMBSpy = sinon.spy(eventTracking, 'sendMB')
     window.metaAttributesCache = new Map()
     this.tagId = '999fff999fff'
     this.tagName = 'First tag name'
@@ -56,7 +56,7 @@ describe('<ProjectListRoot />', function () {
   })
 
   afterEach(function () {
-    sendSpy.restore()
+    sendMBSpy.restore()
     window.user_id = undefined
     fetchMock.reset()
     this.locationStub.restore()
@@ -806,8 +806,15 @@ describe('<ProjectListRoot />', function () {
             const modals = await screen.findAllByRole('dialog')
             const modal = modals[0]
 
-            expect(sendSpy).to.be.calledOnce
-            expect(sendSpy).calledWith('project-list-page-interaction')
+            expect(sendMBSpy).to.have.been.calledTwice
+            expect(sendMBSpy).to.have.been.calledWith('loads_v2_dash')
+            expect(sendMBSpy).to.have.been.calledWith(
+              'project-list-page-interaction',
+              {
+                action: 'rename',
+                page: '/',
+              }
+            )
 
             // same name
             let confirmButton =
@@ -922,8 +929,15 @@ describe('<ProjectListRoot />', function () {
               cloneProjectMock.called(`/project/${projectsData[1].id}/clone`)
             ).to.be.true
 
-            expect(sendSpy).to.be.calledOnce
-            expect(sendSpy).calledWith('project-list-page-interaction')
+            expect(sendMBSpy).to.have.been.calledTwice
+            expect(sendMBSpy).to.have.been.calledWith('loads_v2_dash')
+            expect(sendMBSpy).to.have.been.calledWith(
+              'project-list-page-interaction',
+              {
+                action: 'clone',
+                page: '/',
+              }
+            )
 
             screen.getByText(copiedProjectName)
           })
@@ -1072,8 +1086,15 @@ describe('<ProjectListRoot />', function () {
         await fetchMock.flush(true)
         expect(fetchMock.done()).to.be.true
 
-        expect(sendSpy).to.be.calledOnce
-        expect(sendSpy).calledWith('project-list-page-interaction')
+        expect(sendMBSpy).to.have.been.calledTwice
+        expect(sendMBSpy).to.have.been.calledWith('loads_v2_dash')
+        expect(sendMBSpy).to.have.been.calledWith(
+          'project-list-page-interaction',
+          {
+            action: 'clone',
+            page: '/',
+          }
+        )
 
         expect(screen.queryByText(copiedProjectName)).to.be.null
 

services/web/test/frontend/features/project-list/components/project-search.test.tsx

@@ -6,12 +6,16 @@ import * as eventTracking from '../../../../../frontend/js/infrastructure/event-
 import fetchMock from 'fetch-mock'
 
 describe('Project list search form', function () {
+  let sendMBSpy: sinon.SinonSpy
+
   beforeEach(function () {
+    sendMBSpy = sinon.spy(eventTracking, 'sendMB')
     fetchMock.reset()
   })
 
   afterEach(function () {
     fetchMock.reset()
+    sendMBSpy.restore()
   })
 
   it('renders the search form', function () {
@@ -38,19 +42,18 @@ describe('Project list search form', function () {
 
   it('changes text', function () {
     const setInputValueMock = sinon.stub()
-    const sendSpy = sinon.spy(eventTracking, 'send')
 
     render(<SearchForm inputValue="" setInputValue={setInputValueMock} />)
     const input = screen.getByRole('textbox', { name: /search projects/i })
     const value = 'abc'
 
     fireEvent.change(input, { target: { value } })
-    expect(sendSpy).to.be.calledOnceWith(
-      'project-list-page-interaction',
-      'project-search',
-      'keydown'
-    )
+
+    expect(sendMBSpy).to.have.been.calledOnce
+    expect(sendMBSpy).to.have.been.calledWith('project-list-page-interaction', {
+      action: 'search',
+      page: '/',
+    })
     expect(setInputValueMock).to.be.calledWith(value)
-    sendSpy.restore()
   })
 })

services/web/test/frontend/features/project-list/components/table/projects-action-modal.test.tsx

@@ -11,14 +11,14 @@ import * as eventTracking from '../../../../../../frontend/js/infrastructure/eve
 
 describe('<ProjectsActionModal />', function () {
   const actionHandler = sinon.stub().resolves({})
-  let sendSpy: sinon.SinonSpy
+  let sendMBSpy: sinon.SinonSpy
 
   beforeEach(function () {
-    sendSpy = sinon.spy(eventTracking, 'send')
+    sendMBSpy = sinon.spy(eventTracking, 'sendMB')
   })
 
   afterEach(function () {
-    sendSpy.restore()
+    sendMBSpy.restore()
     resetProjectListContextFetch()
   })
 
@@ -87,11 +87,10 @@ describe('<ProjectsActionModal />', function () {
       />
     )
 
-    sinon.assert.calledWith(
-      sendSpy,
-      'project-list-page-interaction',
-      'project action',
-      'archive'
-    )
+    expect(sendMBSpy).to.have.been.calledOnce
+    expect(sendMBSpy).to.have.been.calledWith('project-list-page-interaction', {
+      action: 'archive',
+      page: '/',
+    })
   })
 })