Record an event when the "unsaved doc" alert is displayed (#24431)

GitOrigin-RevId: 87ccdf5a15173afa7548532d72fb1d3e32f255fe

services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-alert.tsx

@@ -1,7 +1,9 @@
-import { FC, useMemo } from 'react'
+import { FC, useEffect, useMemo, useRef } from 'react'
 import { useFileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
 import { useTranslation } from 'react-i18next'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
+import { sendMB } from '@/infrastructure/event-tracking'
+import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 
 const MAX_UNSAVED_ALERT_SECONDS = 15
 
@@ -23,8 +25,21 @@ const UnsavedDocAlert: FC<{ docId: string; seconds: number }> = ({
   seconds,
 }) => {
   const { pathInFolder, findEntityByPath } = useFileTreePathContext()
+  const { socket } = useConnectionContext()
   const { t } = useTranslation()
 
+  const recordedRef = useRef(false)
+
+  useEffect(() => {
+    if (!recordedRef.current) {
+      recordedRef.current = true
+      sendMB('unsaved-doc-alert-shown', {
+        docId,
+        transport: socket.socket.transport?.name,
+      })
+    }
+  }, [docId, socket])
+
   const doc = useMemo(() => {
     const path = pathInFolder(docId)
     return path ? findEntityByPath(path) : null