Merge pull request #24979 from overleaf/mj-editor-event-hook

[web] Introduce React hook wrapper around sendMB and friends

GitOrigin-RevId: 3c693ae609c6d4e5ba280c45096692aca47975ca

services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx

@@ -1,7 +1,8 @@
 import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu'
+import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 import { useNestableDropdown } from '@/shared/hooks/use-nestable-dropdown'
-import { MouseEventHandler, ReactNode } from 'react'
+import { MouseEventHandler, ReactNode, useCallback } from 'react'
 
 type MenuBarOptionProps = {
   title: string
@@ -11,18 +12,30 @@ type MenuBarOptionProps = {
   href?: string
   target?: string
   rel?: string
+  eventKey?: string
 }
 
 export const MenuBarOption = ({
   title,
-  onClick,
+  onClick: clickHandler,
   href,
   disabled,
   trailingIcon,
   target,
   rel,
+  eventKey,
 }: MenuBarOptionProps) => {
   const { setSelected } = useNestableDropdown()
+  const { sendEvent } = useEditorAnalytics()
+  const onClick: MouseEventHandler = useCallback(
+    e => {
+      if (eventKey) {
+        sendEvent('menu-bar-option-click', { key: eventKey })
+      }
+      return clickHandler?.(e)
+    },
+    [clickHandler, eventKey, sendEvent]
+  )
   return (
     <DropdownListItem>
       <DropdownItem

services/web/frontend/js/shared/hooks/use-editor-analytics.ts

@@ -0,0 +1,44 @@
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
+import {
+  Segmentation,
+  sendMB,
+  sendMBOnce,
+  sendMBSampled,
+} from '@/infrastructure/event-tracking'
+import { useCallback } from 'react'
+
+export const useEditorAnalytics = () => {
+  const editorRedesign = useIsNewEditorEnabled()
+
+  const populateSegmentation = useCallback(
+    (segmentation: Segmentation | undefined = {}): Segmentation => {
+      return editorRedesign
+        ? { ...segmentation, 'editor-redesign': 'enabled' }
+        : segmentation
+    },
+    [editorRedesign]
+  )
+
+  const sendEvent: typeof sendMB = useCallback(
+    (key, segmentation) => {
+      sendMB(key, populateSegmentation(segmentation))
+    },
+    [populateSegmentation]
+  )
+
+  const sendEventOnce: typeof sendMBOnce = useCallback(
+    (key, segmentation) => {
+      sendMBOnce(key, populateSegmentation(segmentation))
+    },
+    [populateSegmentation]
+  )
+
+  const sendEventSampled: typeof sendMBSampled = useCallback(
+    (key, segmentation, rate) => {
+      sendMBSampled(key, populateSegmentation(segmentation), rate)
+    },
+    [populateSegmentation]
+  )
+
+  return { sendEvent, sendEventOnce, sendEventSampled }
+}