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

[web] switch events on project dashboard to BQ GitOrigin-RevId: 9326c19cc5663c4dc2919877eb8df91e312bb902
2025-04-15 15:37:36 +00:00 · 2023-04-13 11:08:17 +01:00 · 2023-04-13 11:08:17 +01:00 · 1096c81f4a
commit 1096c81f4a
parent c35da85ad8
11 changed files with 67 additions and 78 deletions
--- a/services/web/frontend/js/features/project-list/components/modals/projects-action-modal.tsx
+++ b/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])

--- a/services/web/frontend/js/features/project-list/components/modals/rename-project-modal.tsx
+++ b/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])

--- a/services/web/frontend/js/features/project-list/components/search-form.tsx
+++ b/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)
  }

--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx
+++ b/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)
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx
+++ b/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])

--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx
+++ b/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(',')}`)

--- a/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/copy-project-menu-item.tsx
+++ b/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 })

--- a/services/web/test/frontend/features/project-list/components/current-plan-widget.test.tsx
+++ b/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 () {
--- a/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx
+++ b/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

--- a/services/web/test/frontend/features/project-list/components/project-search.test.tsx
+++ b/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()
  })
 })
--- a/services/web/test/frontend/features/project-list/components/table/projects-action-modal.test.tsx
+++ b/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: '/',
+    })
  })
 })