Merge pull request #2987 from overleaf/ta-outline-tracking

Add Event Tracking to Outline

GitOrigin-RevId: 239430ef0ff6ff67bf7c90291969cd28efde0d4a

services/web/app/views/project/editor/file-tree.pug

@@ -108,6 +108,7 @@ aside.editor-sidebar.full-size(
 				project-id="project_id"
 				jump-to-line="jumpToLine"
 				on-toggle="onToggle"
+				event-tracking="eventTracking"
 			)
 
 

services/web/frontend/js/ide/outline/components/OutlinePane.js

@@ -5,7 +5,14 @@ import classNames from 'classnames'
 import OutlineRoot from './OutlineRoot'
 import localStorage from '../../../modules/localStorage'
 
-function OutlinePane({ isTexFile, outline, projectId, jumpToLine, onToggle }) {
+function OutlinePane({
+  isTexFile,
+  outline,
+  projectId,
+  jumpToLine,
+  onToggle,
+  eventTracking
+}) {
   const storageKey = `file_outline.expanded.${projectId}`
   const [expanded, setExpanded] = useState(() => {
     const storedExpandedState = localStorage(storageKey) !== false
@@ -32,6 +39,7 @@ function OutlinePane({ isTexFile, outline, projectId, jumpToLine, onToggle }) {
   function handleExpandCollapseClick() {
     if (isTexFile) {
       localStorage(storageKey, !expanded)
+      eventTracking.sendMB(expanded ? 'outline-collapse' : 'outline-expand')
       setExpanded(!expanded)
     }
   }
@@ -81,7 +89,8 @@ OutlinePane.propTypes = {
   outline: PropTypes.array.isRequired,
   projectId: PropTypes.string.isRequired,
   jumpToLine: PropTypes.func.isRequired,
-  onToggle: PropTypes.func
+  onToggle: PropTypes.func,
+  eventTracking: PropTypes.object.isRequired
 }
 
 export default OutlinePane

services/web/frontend/js/ide/outline/controllers/OutlineController.js

@@ -2,9 +2,10 @@ import App from '../../../base'
 import OutlinePane from '../components/OutlinePane'
 import { react2angular } from 'react2angular'
 
-App.controller('OutlineController', function($scope, ide) {
+App.controller('OutlineController', function($scope, ide, eventTracking) {
   $scope.isTexFile = false
   $scope.outline = []
+  $scope.eventTracking = eventTracking
 
   $scope.$on('outline-manager:outline-changed', onOutlineChange)
 
@@ -17,6 +18,7 @@ App.controller('OutlineController', function($scope, ide) {
 
   $scope.jumpToLine = lineNo => {
     ide.outlineManager.jumpToLine(lineNo)
+    eventTracking.sendMB('outline-jump-to-line')
   }
 
   $scope.onToggle = isOpen => {
@@ -27,13 +29,4 @@ App.controller('OutlineController', function($scope, ide) {
 })
 
 // Wrap React component as Angular component. Only needed for "top-level" component
-App.component(
-  'outlinePane',
-  react2angular(OutlinePane, [
-    'outline',
-    'jumpToLine',
-    'projectId',
-    'isTexFile',
-    'onToggle'
-  ])
-)
+App.component('outlinePane', react2angular(OutlinePane))