Added new analytics events for reviewer role (#23382)

* Added analytics for review mode switcher

* Added "collaborator-role-change" analytics event to edit-member.tsx

GitOrigin-RevId: 030e9208de088898ef112e951fe301799a27277e

services/web/frontend/js/features/review-panel-new/components/review-mode-switcher.tsx

@@ -15,8 +15,10 @@ import { useUserContext } from '@/shared/context/user-context'
 import { useTranslation } from 'react-i18next'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import usePersistedState from '@/shared/hooks/use-persisted-state'
+import { sendMB } from '@/infrastructure/event-tracking'
+import { useEditorContext } from '@/shared/context/editor-context'
 
-type Mode = 'viewing' | 'reviewing' | 'editing'
+type Mode = 'view' | 'review' | 'edit'
 
 const useCurrentMode = (): Mode => {
   const trackChanges = useTrackChangesStateContext()
@@ -27,12 +29,12 @@ const useCurrentMode = (): Mode => {
   const { write, trackedWrite } = usePermissionsContext()
 
   if (write && !trackChangesForCurrentUser) {
-    return 'editing'
+    return 'edit'
   } else if (trackedWrite) {
-    return 'reviewing'
+    return 'review'
   }
 
-  return 'viewing'
+  return 'view'
 }
 
 function ReviewModeSwitcher() {
@@ -40,6 +42,7 @@ function ReviewModeSwitcher() {
   const { saveTrackChangesForCurrentUser } =
     useTrackChangesStateActionsContext()
   const mode = useCurrentMode()
+  const { permissionsLevel } = useEditorContext()
 
   const { write, trackedWrite } = usePermissionsContext()
   const showViewOption = !trackedWrite
@@ -55,33 +58,48 @@ function ReviewModeSwitcher() {
           <OLDropdownMenuItem
             disabled={!write}
             onClick={() => {
+              sendMB('editing-mode-change', {
+                role: permissionsLevel,
+                previousMode: mode,
+                newMode: 'edit',
+              })
               saveTrackChangesForCurrentUser(false)
             }}
             description={t('can_edit_content')}
             leadingIcon="edit"
-            active={write && mode === 'editing'}
+            active={write && mode === 'edit'}
           >
             {t('editing')}
           </OLDropdownMenuItem>
           <OLDropdownMenuItem
             disabled={!trackedWrite}
             onClick={() => {
+              sendMB('editing-mode-change', {
+                role: permissionsLevel,
+                previousMode: mode,
+                newMode: 'review',
+              })
               saveTrackChangesForCurrentUser(true)
             }}
             description={t('can_add_tracked_changes_and_comments')}
             leadingIcon="rate_review"
-            active={trackedWrite && mode === 'reviewing'}
+            active={trackedWrite && mode === 'review'}
           >
             {t('reviewing')}
           </OLDropdownMenuItem>
           {showViewOption && (
             <OLDropdownMenuItem
               onClick={() => {
+                sendMB('editing-mode-change', {
+                  role: permissionsLevel,
+                  previousMode: mode,
+                  newMode: 'view',
+                })
                 saveTrackChangesForCurrentUser(true)
               }}
               description={t('can_view_content')}
               leadingIcon="visibility"
-              active={mode === 'viewing'}
+              active={mode === 'view'}
             >
               {t('viewing')}
             </OLDropdownMenuItem>
@@ -99,7 +117,7 @@ const ModeSwitcherToggleButton = forwardRef<
   const { t } = useTranslation()
   const mode = useCurrentMode()
 
-  if (mode === 'editing') {
+  if (mode === 'edit') {
     return (
       <ModeSwitcherToggleButtonContent
         ref={ref}
@@ -110,7 +128,7 @@ const ModeSwitcherToggleButton = forwardRef<
         ariaExpanded={ariaExpanded}
       />
     )
-  } else if (mode === 'reviewing') {
+  } else if (mode === 'review') {
     return (
       <ModeSwitcherToggleButtonContent
         ref={ref}

services/web/frontend/js/features/share-project-modal/components/edit-member.tsx

@@ -19,6 +19,7 @@ import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/boots
 import { bsVersion } from '@/features/utils/bootstrap-5'
 import classnames from 'classnames'
 import getMeta from '@/utils/meta'
+import { useUserContext } from '@/shared/context/user-context'
 
 type PermissionsOption = PermissionsLevel | 'removeAccess' | 'downgraded'
 
@@ -55,10 +56,17 @@ export default function EditMember({
 
   const { updateProject, monitorRequest } = useShareProjectContext()
   const { _id: projectId, members, invites } = useProjectContext()
+  const user = useUserContext()
 
   // Immediately commit this change if it's lower impact (eg. editor > viewer)
   // but show a confirmation button for removing access
   function handlePrivilegeChange(newPrivileges: PermissionsOption) {
+    sendMB('collaborator-role-change', {
+      previousMode: member.privileges,
+      newMode: newPrivileges,
+      ownerId: user.id,
+    })
+
     setPrivileges(newPrivileges)
     if (newPrivileges !== 'removeAccess') {
       commitPrivilegeChange(newPrivileges)