Add basic navigation instrumentation

- for collecting data on what is clicked in navigation area.

app/assets/javascripts/search_autocomplete.js

@@ -12,6 +12,7 @@ import {
   getProjectSlug,
   spriteIcon,
 } from './lib/utils/common_utils';
+import Tracking from '~/tracking';
 
 /**
  * Search input in top navigation bar.
@@ -355,6 +356,15 @@ export class SearchAutocomplete {
     if (!this.dropdown.hasClass('show')) {
       this.loadingSuggestions = false;
       this.dropdownToggle.dropdown('toggle');
+
+      const trackEvent = 'click_search_bar';
+      const trackCategory = undefined; // will be default set in event method
+
+      Tracking.event(trackCategory, trackEvent, {
+        label: 'main_navigation',
+        property: 'navigation',
+      });
+
       return this.searchInput.removeClass('js-autocomplete-disabled');
     }
   }

app/views/layouts/_search.html.haml

 .search.search-form{ data: { track_label: "navbar_search", track_event: "activate_form_input", track_value: "" } }
-  = form_tag search_path, method: :get, class: 'form-inline' do |f|
+  = form_tag search_path, method: :get, class: 'form-inline' do |_f|
     .search-input-container
       .search-input-wrap
         .dropdown{ data: { url: search_autocomplete_path } }

app/views/layouts/header/_default.html.haml

@@ -7,7 +7,7 @@
       .title-container
         %h1.title
           %span.gl-sr-only GitLab
-          = link_to root_path, title: _('Dashboard'), id: 'logo' do
+          = link_to root_path, title: _('Dashboard'), id: 'logo', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation') do
             = brand_header_logo
             - logo_text = brand_header_logo_type
             - if logo_text.present?
@@ -35,25 +35,40 @@
                 = sprite_icon('search')
           - if header_link?(:issues)
             = nav_link(path: 'dashboard#issues', html_options: { class: "user-counter" }) do
-              = link_to assigned_issues_dashboard_path, title: _('Issues'), class: 'dashboard-shortcuts-issues', aria: { label: _('Issues') }, data: { qa_selector: 'issues_shortcut_button', toggle: 'tooltip', placement: 'bottom', container: 'body' } do
+              = link_to assigned_issues_dashboard_path, title: _('Issues'), class: 'dashboard-shortcuts-issues', aria: { label: _('Issues') },
+                data: { qa_selector: 'issues_shortcut_button', toggle: 'tooltip', placement: 'bottom',
+                track_label: 'main_navigation',
+                track_event: 'click_issues_link',
+                track_property: 'navigation',
+                container: 'body' } do
                 = sprite_icon('issues')
                 - issues_count = assigned_issuables_count(:issues)
                 %span.badge.badge-pill.issues-count.green-badge{ class: ('hidden' if issues_count == 0) }
                   = number_with_delimiter(issues_count)
           - if header_link?(:merge_requests)
             = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter" }) do
-              = link_to assigned_mrs_dashboard_path, title: _('Merge requests'), class: 'dashboard-shortcuts-merge_requests', aria: { label: _('Merge requests') }, data: { qa_selector: 'merge_requests_shortcut_button', toggle: 'tooltip', placement: 'bottom', container: 'body' } do
+              = link_to assigned_mrs_dashboard_path, title: _('Merge requests'), class: 'dashboard-shortcuts-merge_requests', aria: { label: _('Merge requests') },
+                data: { qa_selector: 'merge_requests_shortcut_button', toggle: 'tooltip', placement: 'bottom',
+                track_label: 'main_navigation',
+                track_event: 'click_merge_link',
+                track_property: 'navigation',
+                container: 'body' } do
                 = sprite_icon('git-merge')
                 - merge_requests_count = assigned_issuables_count(:merge_requests)
                 %span.badge.badge-pill.merge-requests-count{ class: ('hidden' if merge_requests_count == 0) }
                   = number_with_delimiter(merge_requests_count)
           - if header_link?(:todos)
             = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do
-              = link_to dashboard_todos_path, title: _('To-Do List'), aria: { label: _('To-Do List') }, class: 'shortcuts-todos', data: { qa_selector: 'todos_shortcut_button', toggle: 'tooltip', placement: 'bottom', container: 'body' } do
+              = link_to dashboard_todos_path, title: _('To-Do List'), aria: { label: _('To-Do List') }, class: 'shortcuts-todos',
+                data: { qa_selector: 'todos_shortcut_button', toggle: 'tooltip', placement: 'bottom',
+                track_label: 'main_navigation',
+                track_event: 'click_to_do_link',
+                track_property: 'navigation',
+                container: 'body' } do
                 = sprite_icon('todo-done')
                 %span.badge.badge-pill.todos-count{ class: ('hidden' if todos_pending_count == 0) }
                   = todos_count_format(todos_pending_count)
-          %li.nav-item.header-help.dropdown.d-none.d-md-block
+          %li.nav-item.header-help.dropdown.d-none.d-md-block{ **tracking_attrs('main_navigation', 'click_question_mark_link', 'navigation') }
             = link_to help_path, class: 'header-help-dropdown-toggle', data: { toggle: "dropdown" } do
               %span.gl-sr-only
                 = s_('Nav|Help')

app/views/layouts/nav/_dashboard.html.haml

@@ -18,7 +18,7 @@
         = render "layouts/nav/groups_dropdown/show"
 
   - if any_dashboard_nav_link?([:groups, :milestones, :activity, :snippets])
-    %li.header-more.dropdown
+    %li.header-more.dropdown{ **tracking_attrs('main_navigation', 'click_more_link', 'navigation') }
       %a{ href: "#", data: { toggle: "dropdown", qa_selector: 'more_dropdown' } }
         = _('More')
         = sprite_icon('angle-down', css_class: 'caret-down')

app/views/layouts/nav/sidebar/_group.html.haml

 - issues_count = group_issues_count(state: 'opened')
 - merge_requests_count = group_merge_requests_count(state: 'opened')
 
-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('groups_side_navigation', 'render', 'groups_side_navigation') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to group_path(@group), title: @group.name do

app/views/layouts/nav/sidebar/_profile.html.haml

-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('user_side_navigation', 'render', 'user_side_navigation') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do

app/views/layouts/nav/sidebar/_project.html.haml

-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('projects_side_navigation', 'render', 'projects_side_navigation') }
   .nav-sidebar-inner-scroll
-    - can_edit = can?(current_user, :admin_project, @project)
     .context-header
       = link_to project_path(@project), title: @project.name do
         .avatar-container.rect-avatar.s40.project-avatar

changelogs/unreleased/223927-write-schema-to-instrument-the-navigation-on-gitlab-com.yml

+---
+title: Setup basic level telemetry for navigation
+merge_request: 39638
+author:
+type: added

spec/frontend/search_autocomplete_spec.js

@@ -3,6 +3,7 @@
 import $ from 'jquery';
 import '~/gl_dropdown';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import initSearchAutocomplete from '~/search_autocomplete';
 import '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
@@ -274,11 +275,32 @@ describe('Search autocomplete dropdown', () => {
   });
 
   describe('enableAutocomplete', () => {
+    let toggleSpy;
+    let trackingSpy;
+
+    beforeEach(() => {
+      toggleSpy = jest.spyOn(widget.dropdownToggle, 'dropdown');
+      trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
+      document.body.dataset.page = 'some:page'; // default tracking for category
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
     it('should open the Dropdown', () => {
-      const toggleSpy = jest.spyOn(widget.dropdownToggle, 'dropdown');
       widget.enableAutocomplete();
 
       expect(toggleSpy).toHaveBeenCalledWith('toggle');
     });
+
+    it('should track the opening', () => {
+      widget.enableAutocomplete();
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_search_bar', {
+        label: 'main_navigation',
+        property: 'navigation',
+      });
+    });
   });
 });