feat: add tracking

packages/sanity/src/structure/components/requestPermissionDialog/RequestPermissionDialog.tsx

@@ -1,3 +1,4 @@
+import {useTelemetry} from '@sanity/telemetry/react'
 import {Box, Card, DialogProvider, Flex, Stack, Text, TextInput, useToast} from '@sanity/ui'
 import {useId, useMemo, useState} from 'react'
 import {useObservable} from 'react-rx'
@@ -8,6 +9,7 @@ import {styled} from 'styled-components'
 import {type AccessRequest} from '../../../core/studio/screens'
 import {Dialog} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
+import {AskToEditRequestSent} from './__telemetry__/RequestPermissionDialog.telemetry'
 
 const MAX_NOTE_LENGTH = 150
 
@@ -43,6 +45,7 @@ export function RequestPermissionDialog({
   onRequestSubmitted,
 }: RequestPermissionDialogProps) {
   const {t} = useTranslation(structureLocaleNamespace)
+  const telemtry = useTelemetry()
   const dialogId = `request-permissions-${useId()}`
   const projectId = useProjectId()
   const client = useClient({apiVersion: '2024-09-26'})
@@ -84,6 +87,7 @@ export function RequestPermissionDialog({
       .then((request) => {
         if (request) {
           if (onRequestSubmitted) onRequestSubmitted()
+          telemtry.log(AskToEditRequestSent)
           toast.push({title: 'Edit access requested'})
         }
       })

packages/sanity/src/structure/components/requestPermissionDialog/__telemetry__/RequestPermissionDialog.telemetry.ts

@@ -0,0 +1,17 @@
+import {defineEvent} from '@sanity/telemetry'
+
+/**
+ * When a draft in a live edit document is published
+ * @internal
+ */
+export const AskToEditDialogOpened = defineEvent({
+  name: 'Ask To Edit Dialog Opened',
+  version: 1,
+  description: 'User clicked the "Ask to edit" button in the document permissions banner',
+})
+
+export const AskToEditRequestSent = defineEvent({
+  name: 'Ask To Edit Request Sent',
+  version: 1,
+  description: 'User sent a role change request from the dialog',
+})

packages/sanity/src/structure/panes/document/documentPanel/banners/PermissionCheckBanner.tsx

@@ -1,4 +1,5 @@
 import {ReadOnlyIcon} from '@sanity/icons'
+import {useTelemetry} from '@sanity/telemetry/react'
 import {Text} from '@sanity/ui'
 import {useMemo, useState} from 'react'
 import {Translate, useCurrentUser, useListFormat, useTranslation} from 'sanity'
@@ -7,6 +8,7 @@ import {
   RequestPermissionDialog,
   useRoleRequestsStatus,
 } from '../../../../components/requestPermissionDialog'
+import {AskToEditDialogOpened} from '../../../../components/requestPermissionDialog/__telemetry__/RequestPermissionDialog.telemetry'
 import {structureLocaleNamespace} from '../../../../i18n'
 import {Banner} from './Banner'
 
@@ -34,6 +36,7 @@ export function PermissionCheckBanner({granted, requiredPermission}: PermissionC
 
   const listFormat = useListFormat({style: 'short'})
   const {t} = useTranslation(structureLocaleNamespace)
+  const telemtry = useTelemetry()
 
   if (granted) return null
 
@@ -61,7 +64,12 @@ export function PermissionCheckBanner({granted, requiredPermission}: PermissionC
         action={
           isOnlyViewer && roleRequestStatus && !requestStatusError && !requestStatusLoading
             ? {
-                onClick: requestPending ? undefined : () => setShowRequestPermissionDialog(true),
+                onClick: requestPending
+                  ? undefined
+                  : () => {
+                      setShowRequestPermissionDialog(true)
+                      telemtry.log(AskToEditDialogOpened)
+                    },
                 text: requestPending
                   ? t('banners.permission-check-banner.request-permission-button.sent')
                   : t('banners.permission-check-banner.request-permission-button.text'),