Merge pull request #15844 from overleaf/jpa-download-events

[web] change isMobileDevice segmentation to isSmallDevice

GitOrigin-RevId: 1fcaf6ececc1fa75fd681ef2497bfa5e5567143d

services/web/frontend/js/features/editor-left-menu/components/download-pdf.tsx

@@ -4,7 +4,7 @@ import { useProjectContext } from '../../../shared/context/project-context'
 import Icon from '../../../shared/components/icon'
 import Tooltip from '../../../shared/components/tooltip'
 import * as eventTracking from '../../../infrastructure/event-tracking'
-import { isMobileDevice } from '../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../infrastructure/event-tracking'
 
 export default function DownloadPDF() {
   const { t } = useTranslation()
@@ -15,7 +15,7 @@ export default function DownloadPDF() {
     eventTracking.sendMB('download-pdf-button-click', {
       projectId,
       location: 'left-menu',
-      isMobileDevice,
+      isSmallDevice,
     })
   }
 

services/web/frontend/js/features/editor-left-menu/components/download-source.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import { useProjectContext } from '../../../shared/context/project-context'
 import Icon from '../../../shared/components/icon'
 import * as eventTracking from '../../../infrastructure/event-tracking'
-import { isMobileDevice } from '../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../infrastructure/event-tracking'
 
 export default function DownloadSource() {
   const { t } = useTranslation()
@@ -12,7 +12,7 @@ export default function DownloadSource() {
     eventTracking.sendMB('download-zip-button-click', {
       projectId,
       location: 'left-menu',
-      isMobileDevice,
+      isSmallDevice,
     })
   }
 

services/web/frontend/js/features/event-tracking/document-first-change-event.js

@@ -1,4 +1,4 @@
-import { isMobileDevice, sendMB } from '@/infrastructure/event-tracking'
+import { isSmallDevice, sendMB } from '@/infrastructure/event-tracking'
 import getMeta from '@/utils/meta'
 
 // record once per page load
@@ -8,5 +8,5 @@ export function recordDocumentFirstChangeEvent() {
   if (recorded) return
   recorded = true
   const projectId = getMeta('ol-project_id')
-  sendMB('document-first-change', { projectId, isMobileDevice })
+  sendMB('document-first-change', { projectId, isSmallDevice })
 }

services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-download-button.tsx

@@ -5,7 +5,7 @@ import Icon from '../../../shared/components/icon'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import { useProjectContext } from '../../../shared/context/project-context'
 import * as eventTracking from '../../../infrastructure/event-tracking'
-import { isMobileDevice } from '../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../infrastructure/event-tracking'
 
 function PdfHybridDownloadButton() {
   const { pdfDownloadUrl } = useCompileContext()
@@ -21,7 +21,7 @@ function PdfHybridDownloadButton() {
     eventTracking.sendMB('download-pdf-button-click', {
       projectId,
       location: 'pdf-preview',
-      isMobileDevice,
+      isSmallDevice,
     })
   }
 

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

@@ -6,7 +6,7 @@ import AccessibleModal from '../../../../shared/components/accessible-modal'
 import { getUserFacingMessage } from '../../../../infrastructure/fetch-json'
 import useIsMounted from '../../../../shared/hooks/use-is-mounted'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
-import { isMobileDevice } from '../../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../../infrastructure/event-tracking'
 import getMeta from '@/utils/meta'
 import Notification from '@/shared/components/notification'
 
@@ -62,7 +62,7 @@ function ProjectsActionModal({
     if (showModal) {
       eventTracking.sendMB('project-list-page-interaction', {
         action,
-        isMobileDevice,
+        isSmallDevice,
       })
     }
   }, [action, showModal])

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

@@ -16,7 +16,7 @@ import useAsync from '../../../../shared/hooks/use-async'
 import { useProjectListContext } from '../../context/project-list-context'
 import { getUserFacingMessage } from '../../../../infrastructure/fetch-json'
 import { debugConsole } from '@/utils/debugging'
-import { isMobileDevice } from '../../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../../infrastructure/event-tracking'
 import Notification from '@/shared/components/notification'
 import getMeta from '@/utils/meta'
 
@@ -45,7 +45,7 @@ function RenameProjectModal({
       eventTracking.sendMB('project-list-page-interaction', {
         action: 'rename',
         projectId: project.id,
-        isMobileDevice,
+        isSmallDevice,
       })
     }
   }, [showModal, project.id])

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

@@ -11,7 +11,7 @@ import * as eventTracking from '../../../infrastructure/event-tracking'
 import classnames from 'classnames'
 import { Tag } from '../../../../../app/src/Features/Tags/types'
 import { Filter } from '../context/project-list-context'
-import { isMobileDevice } from '../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../infrastructure/event-tracking'
 
 type SearchFormOwnProps = {
   inputValue: string
@@ -67,7 +67,7 @@ function SearchForm({
   ) => {
     eventTracking.sendMB('project-list-page-interaction', {
       action: 'search',
-      isMobileDevice,
+      isSmallDevice,
     })
     setInputValue(e.target.value)
   }

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

@@ -11,7 +11,7 @@ import {
   Project,
 } from '../../../../../../../../types/project/dashboard/api'
 import { useProjectTags } from '@/features/project-list/hooks/use-project-tags'
-import { isMobileDevice } from '../../../../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../../../../infrastructure/event-tracking'
 
 type CopyButtonProps = {
   project: Project
@@ -45,7 +45,7 @@ function CopyProjectButton({ project, children }: CopyButtonProps) {
       eventTracking.sendMB('project-list-page-interaction', {
         action: 'clone',
         projectId: project.id,
-        isMobileDevice,
+        isSmallDevice,
       })
       addClonedProjectToViewData(clonedProject)
       for (const tag of tags) {

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

@@ -5,7 +5,7 @@ import Icon from '../../../../../../shared/components/icon'
 import Tooltip from '../../../../../../shared/components/tooltip'
 import * as eventTracking from '../../../../../../infrastructure/event-tracking'
 import { useLocation } from '../../../../../../shared/hooks/use-location'
-import { isMobileDevice } from '../../../../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../../../../infrastructure/event-tracking'
 
 type DownloadProjectButtonProps = {
   project: Project
@@ -24,7 +24,7 @@ function DownloadProjectButton({
     eventTracking.sendMB('project-list-page-interaction', {
       action: 'downloadZip',
       projectId: project.id,
-      isMobileDevice,
+      isSmallDevice,
     })
     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

@@ -5,7 +5,7 @@ import Tooltip from '../../../../../../shared/components/tooltip'
 import * as eventTracking from '../../../../../../infrastructure/event-tracking'
 import { useProjectListContext } from '../../../../context/project-list-context'
 import { useLocation } from '../../../../../../shared/hooks/use-location'
-import { isMobileDevice } from '../../../../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../../../../infrastructure/event-tracking'
 
 function DownloadProjectsButton() {
   const { selectedProjects, selectOrUnselectAllProjects } =
@@ -19,7 +19,7 @@ function DownloadProjectsButton() {
   const handleDownloadProjects = useCallback(() => {
     eventTracking.sendMB('project-list-page-interaction', {
       action: 'downloadZips',
-      isMobileDevice,
+      isSmallDevice,
     })
 
     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

@@ -7,7 +7,7 @@ import { useProjectListContext } from '../../../../context/project-list-context'
 import * as eventTracking from '../../../../../../infrastructure/event-tracking'
 import { ClonedProject } from '../../../../../../../../types/project/dashboard/api'
 import { useProjectTags } from '@/features/project-list/hooks/use-project-tags'
-import { isMobileDevice } from '../../../../../../infrastructure/event-tracking'
+import { isSmallDevice } from '../../../../../../infrastructure/event-tracking'
 
 function CopyProjectMenuItem() {
   const {
@@ -37,7 +37,7 @@ function CopyProjectMenuItem() {
       eventTracking.sendMB('project-list-page-interaction', {
         action: 'clone',
         projectId: project.id,
-        isMobileDevice,
+        isSmallDevice,
       })
       addClonedProjectToViewData(clonedProject)
       for (const tag of tags) {

services/web/frontend/js/infrastructure/event-tracking.js

@@ -55,7 +55,7 @@ export function sendMBSampled(key, body = {}, rate = 0.01) {
 // @screen-xs-max: (@screen-sm-min - 1);
 // @screen-sm-min: @screen-sm;
 // @screen-sm: 768px;
-export const isMobileDevice = window.matchMedia('(max-width: 767px)').matches
+export const isSmallDevice = window.screen.width < 768
 
 function sendBeacon(key, data) {
   if (!navigator || !navigator.sendBeacon) return

services/web/test/frontend/bootstrap.js

@@ -120,9 +120,6 @@ globalThis.WebSocket = class WebSocket {
   static CLOSED = 3
 }
 
-// add stub for window.matchMedia
-window.matchMedia = () => ({ matches: false })
-
 // node-fetch doesn't accept relative URL's: https://github.com/node-fetch/node-fetch/blob/master/docs/v2-LIMITS.md#known-differences
 const fetch = require('node-fetch')
 globalThis.fetch =

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

@@ -821,7 +821,7 @@ describe('<ProjectListRoot />', function () {
                 action: 'rename',
                 page: '/',
                 projectId: copyableProject.id,
-                isMobileDevice: false,
+                isSmallDevice: true,
               }
             )
 
@@ -954,7 +954,7 @@ describe('<ProjectListRoot />', function () {
                 action: 'clone',
                 page: '/',
                 projectId: archiveableProject.id,
-                isMobileDevice: false,
+                isSmallDevice: true,
               }
             )
 
@@ -1113,7 +1113,7 @@ describe('<ProjectListRoot />', function () {
             action: 'clone',
             page: '/',
             projectId: archiveableProject.id,
-            isMobileDevice: false,
+            isSmallDevice: true,
           }
         )
 

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

@@ -85,7 +85,7 @@ describe('Project list search form', function () {
     expect(sendMBSpy).to.have.been.calledWith('project-list-page-interaction', {
       action: 'search',
       page: '/',
-      isMobileDevice: false,
+      isSmallDevice: true,
     })
     expect(setInputValueMock).to.be.calledWith(value)
   })

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

@@ -91,7 +91,7 @@ describe('<ProjectsActionModal />', function () {
     expect(sendMBSpy).to.have.been.calledWith('project-list-page-interaction', {
       action: 'archive',
       page: '/',
-      isMobileDevice: false,
+      isSmallDevice: true,
     })
   })
 })