feat(comments): add telemetry (#6541)

packages/sanity/src/core/comments/__telemetry__/comments.telemetry.ts

@@ -0,0 +1,21 @@
+import {defineEvent} from '@sanity/telemetry'
+
+import {type CommentStatus} from '../types'
+
+export const CommentLinkCopied = defineEvent({
+  name: 'Comment Link Copied',
+  version: 1,
+  description: 'The link to a comment is copied',
+})
+
+export const CommentViewedFromLink = defineEvent({
+  name: 'Comment Viewed From Link',
+  version: 1,
+  description: 'A comment is viewed from a link',
+})
+
+export const CommentListViewChanged = defineEvent<{view: CommentStatus}>({
+  name: 'Comment List View Changed',
+  version: 1,
+  description: 'The view of the comment list is changed',
+})

packages/sanity/src/core/comments/hooks/index.ts

@@ -6,5 +6,6 @@ export * from './useCommentsIntent'
 export * from './useCommentsOnboarding'
 export * from './useCommentsScroll'
 export * from './useCommentsSelectedPath'
+export * from './useCommentsTelemetry'
 export * from './useCommentsUpsell'
 export * from './useResolveCommentsEnabled'

packages/sanity/src/core/comments/hooks/useCommentsTelemetry.ts

@@ -0,0 +1,44 @@
+import {useTelemetry} from '@sanity/telemetry/react'
+import {useCallback, useMemo} from 'react'
+
+import {
+  CommentLinkCopied,
+  CommentListViewChanged,
+  CommentViewedFromLink,
+} from '../__telemetry__/comments.telemetry'
+import {type CommentStatus} from '../types'
+
+interface CommentsTelemetryHookValue {
+  commentLinkCopied: () => void
+  commentListViewChanged: (view: CommentStatus) => void
+  commentViewedFromLink: () => void
+}
+
+/** @internal */
+export function useCommentsTelemetry(): CommentsTelemetryHookValue {
+  const telemetry = useTelemetry()
+
+  const commentLinkCopied = useCallback(() => {
+    telemetry.log(CommentLinkCopied)
+  }, [telemetry])
+
+  const commentViewedFromLink = useCallback(() => {
+    telemetry.log(CommentViewedFromLink)
+  }, [telemetry])
+
+  const commentListViewChanged = useCallback(
+    (view: CommentStatus) => {
+      telemetry.log(CommentListViewChanged, {view})
+    },
+    [telemetry],
+  )
+
+  return useMemo(
+    (): CommentsTelemetryHookValue => ({
+      commentLinkCopied,
+      commentListViewChanged,
+      commentViewedFromLink,
+    }),
+    [commentLinkCopied, commentListViewChanged, commentViewedFromLink],
+  )
+}

packages/sanity/src/core/comments/plugin/inspector/CommentsInspector.tsx

@@ -20,6 +20,7 @@ import {
   useCommentsOnboarding,
   useCommentsScroll,
   useCommentsSelectedPath,
+  useCommentsTelemetry,
   useCommentsUpsell,
 } from '../../hooks'
 import {commentsLocaleNamespace} from '../../i18n'
@@ -98,38 +99,22 @@ function CommentsInspectorInner(
   const {scrollToComment, scrollToField, scrollToInlineComment} = useCommentsScroll()
   const {selectedPath, setSelectedPath} = useCommentsSelectedPath()
   const {isDismissed, setDismissed} = useCommentsOnboarding()
+  const telemetry = useCommentsTelemetry()
 
-  const {upsellData, telemetryLogs} = useCommentsUpsell()
+  const {upsellData, telemetryLogs: upsellTelemetryLogs} = useCommentsUpsell()
 
   const currentComments = useMemo(() => comments.data[status], [comments, status])
 
   const {loading} = comments
 
-  useEffect(() => {
-    if (mode === 'upsell') {
-      if (selectedPath?.origin === 'form') {
-        telemetryLogs.panelViewed('field_action')
-      } else if (commentIdParamRef.current) {
-        telemetryLogs.panelViewed('link')
-      } else {
-        telemetryLogs.panelViewed('document_action')
-      }
-    }
-    return () => {
-      if (mode === 'upsell') {
-        telemetryLogs.panelDismissed()
-      }
-    }
-    // We want to run this effect only on mount and unmount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   const handleChangeView = useCallback(
     (nextView: CommentStatus) => {
       setStatus(nextView)
       setSelectedPath(null)
+
+      telemetry.commentListViewChanged(nextView)
     },
-    [setSelectedPath, setStatus],
+    [setSelectedPath, setStatus, telemetry],
   )
 
   const handleCloseInspector = useCallback(() => {
@@ -157,10 +142,12 @@ function CommentsInspectorInner(
             title: t('copy-link-error-message'),
           })
         })
+
+      telemetry.commentLinkCopied()
     }
 
     return copyLink
-  }, [getCommentLink, pushToast, t])
+  }, [getCommentLink, pushToast, t, telemetry])
 
   const handleCreateRetry = useCallback(
     (id: string) => {
@@ -340,6 +327,25 @@ function CommentsInspectorInner(
 
   useClickOutside(handleClickOutside, [rootRef.current])
 
+  useEffect(() => {
+    if (mode === 'upsell') {
+      if (selectedPath?.origin === 'form') {
+        upsellTelemetryLogs.panelViewed('field_action')
+      } else if (commentIdParamRef.current) {
+        upsellTelemetryLogs.panelViewed('link')
+      } else {
+        upsellTelemetryLogs.panelViewed('document_action')
+      }
+    }
+    return () => {
+      if (mode === 'upsell') {
+        upsellTelemetryLogs.panelDismissed()
+      }
+    }
+    // We want to run this effect only on mount and unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   // Handle scroll to comment from URL param
   useEffect(() => {
     // Make sure that the comment exists before we try to scroll to it.
@@ -362,24 +368,39 @@ function CommentsInspectorInner(
       commentIdParamRef.current = undefined
 
       onClearSelectedComment?.()
+
+      telemetry.commentViewedFromLink()
     }
-  }, [getComment, loading, onClearSelectedComment, scrollToComment, setSelectedPath, setStatus])
+  }, [
+    getComment,
+    loading,
+    onClearSelectedComment,
+    scrollToComment,
+    setSelectedPath,
+    setStatus,
+    telemetry,
+  ])
 
   const beforeListNode = useMemo(() => {
     if (mode === 'upsell' && upsellData) {
       return (
         <CommentsUpsellPanel
           data={upsellData}
           // eslint-disable-next-line react/jsx-handler-names
-          onPrimaryClick={telemetryLogs.panelPrimaryClicked}
+          onPrimaryClick={upsellTelemetryLogs.panelPrimaryClicked}
           // eslint-disable-next-line react/jsx-handler-names
-          onSecondaryClick={telemetryLogs.panelSecondaryClicked}
+          onSecondaryClick={upsellTelemetryLogs.panelSecondaryClicked}
         />
       )
     }
 
     return null
-  }, [mode, telemetryLogs.panelPrimaryClicked, telemetryLogs.panelSecondaryClicked, upsellData])
+  }, [
+    mode,
+    upsellTelemetryLogs.panelPrimaryClicked,
+    upsellTelemetryLogs.panelSecondaryClicked,
+    upsellData,
+  ])
 
   return (
     <Fragment>