Merge pull request #28417 from overleaf/dp-more-analytics

Improve analytics events for the editor redesign

GitOrigin-RevId: d3e4c9c627dc2c0dada909efbcf48a8973538c18

services/web/frontend/js/features/ide-react/components/editor-navigation-toolbar.tsx

@@ -1,21 +1,22 @@
 import { useState, useCallback } from 'react'
 import { useOnlineUsersContext } from '@/features/ide-react/context/online-users-context'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
-import * as eventTracking from '@/infrastructure/event-tracking'
 import EditorNavigationToolbarRoot from '@/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root'
 import ShareProjectModal from '@/features/share-project-modal/components/share-project-modal'
 import EditorOverLimitModal from '@/features/share-project-modal/components/editor-over-limit-modal'
 import ViewOnlyAccessModal from '@/features/share-project-modal/components/view-only-access-modal'
+import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 
 function EditorNavigationToolbar() {
   const [showShareModal, setShowShareModal] = useState(false)
   const { onlineUsersArray } = useOnlineUsersContext()
   const { openDoc } = useEditorManagerContext()
+  const { sendEventOnce } = useEditorAnalytics()
 
   const handleOpenShareModal = useCallback(() => {
-    eventTracking.sendMBOnce('ide-open-share-modal-once')
+    sendEventOnce('ide-open-share-modal-once')
     setShowShareModal(true)
-  }, [])
+  }, [sendEventOnce])
 
   const handleHideShareModal = useCallback(() => {
     setShowShareModal(false)

services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry.tsx

@@ -1,13 +1,11 @@
 import {
   Dispatch,
   MouseEventHandler,
-  useCallback,
   memo,
   SetStateAction,
   useState,
 } from 'react'
 import HumanReadableLogsHints from '../../../../ide/human-readable-logs/HumanReadableLogsHints'
-import { sendMB } from '@/infrastructure/event-tracking'
 import {
   ErrorLevel,
   LogEntry as LogEntryData,
@@ -29,7 +27,7 @@ type LogEntryProps = {
   showSourceLocationLink?: boolean
   entryAriaLabel?: string
   contentDetails?: string[]
-  onSourceLocationClick?: (sourceLocation: SourceLocation) => void
+  onSourceLocationClick?: MouseEventHandler<HTMLButtonElement>
   index?: number
   logEntry?: LogEntryData
   id?: string
@@ -83,23 +81,6 @@ export function ControlledLogEntry({
     extraInfoURL = hint.extraInfoURL
   }
 
-  const handleLogEntryLinkClick: MouseEventHandler<HTMLButtonElement> =
-    useCallback(
-      event => {
-        event.preventDefault()
-
-        if (onSourceLocationClick && sourceLocation) {
-          onSourceLocationClick(sourceLocation)
-
-          const parts = sourceLocation?.file?.split('.')
-          const extension =
-            parts?.length && parts?.length > 1 ? parts.pop() : ''
-          sendMB('log-entry-link-click', { level, ruleId, extension })
-        }
-      },
-      [level, onSourceLocationClick, ruleId, sourceLocation]
-    )
-
   return (
     <div
       className={classNames('log-entry', className)}
@@ -113,7 +94,7 @@ export function ControlledLogEntry({
         headerTitle={headerTitle}
         logType={logType}
         showSourceLocationLink={showSourceLocationLink}
-        onSourceLocationClick={handleLogEntryLinkClick}
+        onSourceLocationClick={onSourceLocationClick}
         collapsed={collapsed}
         onToggleCollapsed={() => setCollapsed(collapsed => !collapsed)}
         id={id}

services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state/error-state.tsx

@@ -1,8 +1,11 @@
 import { useRailContext } from '@/features/ide-redesign/contexts/rail-context'
+import { sendMB } from '@/infrastructure/event-tracking'
 import MaterialIcon from '@/shared/components/material-icon'
 import OLButton from '@/shared/components/ol/ol-button'
 import classNames from 'classnames'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
 
 export default function ErrorState({
   title,
@@ -47,15 +50,15 @@ export default function ErrorState({
 export const CheckLogsButton = () => {
   const { t } = useTranslation()
   const { openTab: openRailTab } = useRailContext()
+  const { error } = useCompileContext()
+
+  const onClick = useCallback(() => {
+    openRailTab('errors')
+    sendMB('check-logs-click', { error })
+  }, [openRailTab, error])
 
   return (
-    <OLButton
-      variant="secondary"
-      size="sm"
-      onClick={() => {
-        openRailTab('errors')
-      }}
-    >
+    <OLButton variant="secondary" size="sm" onClick={onClick}>
       {t('check_error_logs')}
     </OLButton>
   )

services/web/frontend/js/features/ide-redesign/components/toolbar/share-project-button.tsx

@@ -3,17 +3,18 @@ import OLButton from '@/shared/components/ol/ol-button'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import * as eventTracking from '@/infrastructure/event-tracking'
+import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 
 export default function ShareProjectButton() {
   const { t } = useTranslation()
+  const { sendEventOnce } = useEditorAnalytics()
 
   const [showShareModal, setShowShareModal] = useState(false)
 
   const handleOpenShareModal = useCallback(() => {
-    eventTracking.sendMBOnce('ide-open-share-modal-once')
+    sendEventOnce('ide-open-share-modal-once')
     setShowShareModal(true)
-  }, [])
+  }, [sendEventOnce])
 
   const handleHideShareModal = useCallback(() => {
     setShowShareModal(false)

services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.tsx

@@ -2,11 +2,11 @@ import { memo, MouseEventHandler, useCallback } from 'react'
 import PreviewLogEntryHeader from '../../preview/components/preview-log-entry-header'
 import PdfLogEntryContent from './pdf-log-entry-content'
 import HumanReadableLogsHints from '../../../ide/human-readable-logs/HumanReadableLogsHints'
-import { sendMB } from '@/infrastructure/event-tracking'
 import getMeta from '@/utils/meta'
 import { ErrorLevel, LogEntry, SourceLocation } from '../util/types'
 import { useAreNewErrorLogsEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 import NewLogEntry from '@/features/ide-redesign/components/error-logs/log-entry'
+import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 
 function PdfLogEntry({
   autoExpand,
@@ -46,6 +46,7 @@ function PdfLogEntry({
   id?: string
 }) {
   const showAiErrorAssistant = getMeta('ol-showAiErrorAssistant')
+  const { sendEvent } = useEditorAnalytics()
 
   if (ruleId && HumanReadableLogsHints[ruleId]) {
     const hint = HumanReadableLogsHints[ruleId]
@@ -64,10 +65,10 @@ function PdfLogEntry({
           const parts = sourceLocation?.file?.split('.')
           const extension =
             parts?.length && parts?.length > 1 ? parts.pop() : ''
-          sendMB('log-entry-link-click', { level, ruleId, extension })
+          sendEvent('log-entry-link-click', { level, ruleId, extension })
         }
       },
-      [level, onSourceLocationClick, ruleId, sourceLocation]
+      [level, onSourceLocationClick, ruleId, sourceLocation, sendEvent]
     )
 
   const newErrorlogs = useAreNewErrorLogsEnabled()
@@ -88,7 +89,7 @@ function PdfLogEntry({
         contentDetails={contentDetails}
         entryAriaLabel={entryAriaLabel}
         sourceLocation={sourceLocation}
-        onSourceLocationClick={onSourceLocationClick}
+        onSourceLocationClick={handleLogEntryLinkClick}
         showSourceLocationLink={showSourceLocationLink}
         extraInfoURL={extraInfoURL}
       />