Merge branch '329238-fj-instrument-project-sidebar' into 'master'

Resolve "Instrument left sidebar for tracking"

See merge request gitlab-org/gitlab!62030

app/assets/javascripts/pages/projects/index.js

 import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
+import { initSidebarTracking } from '../shared/nav/sidebar_tracking';
 import Project from './project';
 
 new Project(); // eslint-disable-line no-new
 new ShortcutsNavigation(); // eslint-disable-line no-new
+initSidebarTracking();

app/assets/javascripts/pages/shared/nav/sidebar_tracking.js

+function onSidebarLinkClick() {
+  const setDataTrackAction = (element, action) => {
+    element.setAttribute('data-track-action', action);
+  };
+
+  const setDataTrackExtra = (element, value) => {
+    const SIDEBAR_COLLAPSED = 'Collapsed';
+    const SIDEBAR_EXPANDED = 'Expanded';
+    const sidebarCollapsed = document
+      .querySelector('.nav-sidebar')
+      .classList.contains('js-sidebar-collapsed')
+      ? SIDEBAR_COLLAPSED
+      : SIDEBAR_EXPANDED;
+
+    element.setAttribute(
+      'data-track-extra',
+      JSON.stringify({ sidebar_display: sidebarCollapsed, menu_display: value }),
+    );
+  };
+
+  const EXPANDED = 'Expanded';
+  const FLY_OUT = 'Fly out';
+  const CLICK_MENU_ACTION = 'click_menu';
+  const CLICK_MENU_ITEM_ACTION = 'click_menu_item';
+  const parentElement = this.parentNode;
+  const subMenuList = parentElement.closest('.sidebar-sub-level-items');
+
+  if (subMenuList) {
+    const isFlyOut = subMenuList.classList.contains('fly-out-list') ? FLY_OUT : EXPANDED;
+
+    setDataTrackExtra(parentElement, isFlyOut);
+    setDataTrackAction(parentElement, CLICK_MENU_ITEM_ACTION);
+  } else {
+    const isFlyOut = parentElement.classList.contains('is-showing-fly-out') ? FLY_OUT : EXPANDED;
+
+    setDataTrackExtra(parentElement, isFlyOut);
+    setDataTrackAction(parentElement, CLICK_MENU_ACTION);
+  }
+}
+export const initSidebarTracking = () => {
+  document.querySelectorAll('.nav-sidebar li[data-track-label] > a').forEach((link) => {
+    link.addEventListener('click', onSidebarLinkClick);
+  });
+};

app/views/shared/nav/_sidebar_menu_item.html.haml

-= nav_link(**sidebar_menu_item.active_routes) do
+= nav_link(**sidebar_menu_item.active_routes, html_options: sidebar_menu_item.nav_link_html_options) do
   = link_to sidebar_menu_item.link, **sidebar_menu_item.container_html_options, data: { qa_selector: 'sidebar_menu_item_link', qa_menu_item: sidebar_menu_item.title } do
     %span
       = sidebar_menu_item.title

lib/sidebars/concerns/container_with_html_options.rb

@@ -38,6 +38,16 @@ module Sidebars
       # in the helper method that sets the active class
       # on each element.
       def nav_link_html_options
+        {
+          data: {
+            track_label: self.class.name.demodulize.underscore
+          }
+        }.deep_merge(extra_nav_link_html_options)
+      end
+
+      # Classes should mostly override this method
+      # and not `nav_link_html_options`.
+      def extra_nav_link_html_options
         {}
       end
 

lib/sidebars/menu_item.rb

@@ -22,5 +22,13 @@ module Sidebars
     def render?
       true
     end
+
+    def nav_link_html_options
+      {
+        data: {
+          track_label: item_id
+        }
+      }
+    end
   end
 end

lib/sidebars/projects/menus/learn_gitlab_menu.rb

@@ -35,14 +35,13 @@ module Sidebars
           end
         end
 
-        override :extra_container_html_options
-        def nav_link_html_options
+        override :extra_nav_link_html_options
+        def extra_nav_link_html_options
           {
             class: 'home',
             data: {
-              track_action: 'click_menu',
-              track_property: context.learn_gitlab_experiment_tracking_category,
-              track_label: 'learn_gitlab'
+              track_label: 'learn_gitlab',
+              track_property: context.learn_gitlab_experiment_tracking_category
             }
           }
         end

lib/sidebars/projects/menus/project_information_menu.rb

@@ -29,8 +29,8 @@ module Sidebars
           end
         end
 
-        override :nav_link_html_options
-        def nav_link_html_options
+        override :extra_nav_link_html_options
+        def extra_nav_link_html_options
           { class: 'home' }
         end
 

lib/sidebars/projects/menus/scope_menu.rb

@@ -28,8 +28,8 @@ module Sidebars
           }
         end
 
-        override :nav_link_html_options
-        def nav_link_html_options
+        override :extra_nav_link_html_options
+        def extra_nav_link_html_options
           return {} if Feature.disabled?(:sidebar_refactor, context.current_user, default_enabled: :yaml)
 
           { class: 'context-header' }

spec/frontend/pages/shared/nav/sidebar_tracking_spec.js

+import { setHTMLFixture } from 'helpers/fixtures';
+import { initSidebarTracking } from '~/pages/shared/nav/sidebar_tracking';
+
+describe('~/pages/shared/nav/sidebar_tracking.js', () => {
+  beforeEach(() => {
+    setHTMLFixture(`
+      <aside class="nav-sidebar">
+        <div class="nav-sidebar-inner-scroll">
+          <ul class="sidebar-top-level-items">
+            <li data-track-label="project_information_menu" class="home">
+              <a aria-label="Project information" class="shortcuts-project-information has-sub-items" href="">
+                  <span class="nav-icon-container">
+                    <svg class="s16" data-testid="project-icon">
+                        <use xlink:href="/assets/icons-1b2dadc4c3d49797908ba67b8f10da5d63dd15d859bde28d66fb60bbb97a4dd5.svg#project"></use>
+                    </svg>
+                  </span>
+                  <span class="nav-item-name">Project information</span>
+              </a>
+              <ul class="sidebar-sub-level-items">
+                <li class="fly-out-top-item">
+                  <a aria-label="Project information" href="#">
+                    <strong class="fly-out-top-item-name">Project information</strong>
+                  </a>
+                </li>
+                <li class="divider fly-out-top-item"></li>
+                <li data-track-label="activity" class="">
+                  <a aria-label="Activity" class="shortcuts-project-activity" href=#">
+                    <span>Activity</span>
+                  </a>
+                </li>
+                <li data-track-label="labels" class="">
+                  <a aria-label="Labels" href="#">
+                    <span>Labels</span>
+                  </a>
+                </li>
+                <li data-track-label="members" class="">
+                  <a aria-label="Members" href="#">
+                    <span>Members</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </aside>
+    `);
+
+    initSidebarTracking();
+  });
+
+  describe('sidebar is not collapsed', () => {
+    describe('menu is not expanded', () => {
+      it('sets the proper data tracking attributes when clicking on menu', () => {
+        const menu = document.querySelector('li[data-track-label="project_information_menu"]');
+        const menuLink = menu.querySelector('a');
+
+        menu.classList.add('is-over', 'is-showing-fly-out');
+        menuLink.click();
+
+        expect(menu.dataset).toMatchObject({
+          trackAction: 'click_menu',
+          trackExtra: JSON.stringify({
+            sidebar_display: 'Expanded',
+            menu_display: 'Fly out',
+          }),
+        });
+      });
+
+      it('sets the proper data tracking attributes when clicking on submenu', () => {
+        const menu = document.querySelector('li[data-track-label="activity"]');
+        const menuLink = menu.querySelector('a');
+        const submenuList = document.querySelector('ul.sidebar-sub-level-items');
+
+        submenuList.classList.add('fly-out-list');
+        menuLink.click();
+
+        expect(menu.dataset).toMatchObject({
+          trackAction: 'click_menu_item',
+          trackExtra: JSON.stringify({
+            sidebar_display: 'Expanded',
+            menu_display: 'Fly out',
+          }),
+        });
+      });
+    });
+
+    describe('menu is expanded', () => {
+      it('sets the proper data tracking attributes when clicking on menu', () => {
+        const menu = document.querySelector('li[data-track-label="project_information_menu"]');
+        const menuLink = menu.querySelector('a');
+
+        menu.classList.add('active');
+        menuLink.click();
+
+        expect(menu.dataset).toMatchObject({
+          trackAction: 'click_menu',
+          trackExtra: JSON.stringify({
+            sidebar_display: 'Expanded',
+            menu_display: 'Expanded',
+          }),
+        });
+      });
+
+      it('sets the proper data tracking attributes when clicking on submenu', () => {
+        const menu = document.querySelector('li[data-track-label="activity"]');
+        const menuLink = menu.querySelector('a');
+
+        menu.classList.add('active');
+        menuLink.click();
+
+        expect(menu.dataset).toMatchObject({
+          trackAction: 'click_menu_item',
+          trackExtra: JSON.stringify({
+            sidebar_display: 'Expanded',
+            menu_display: 'Expanded',
+          }),
+        });
+      });
+    });
+  });
+
+  describe('sidebar is collapsed', () => {
+    beforeEach(() => {
+      document.querySelector('aside.nav-sidebar').classList.add('js-sidebar-collapsed');
+    });
+
+    it('sets the proper data tracking attributes when clicking on menu', () => {
+      const menu = document.querySelector('li[data-track-label="project_information_menu"]');
+      const menuLink = menu.querySelector('a');
+
+      menu.classList.add('is-over', 'is-showing-fly-out');
+      menuLink.click();
+
+      expect(menu.dataset).toMatchObject({
+        trackAction: 'click_menu',
+        trackExtra: JSON.stringify({
+          sidebar_display: 'Collapsed',
+          menu_display: 'Fly out',
+        }),
+      });
+    });
+
+    it('sets the proper data tracking attributes when clicking on submenu', () => {
+      const menu = document.querySelector('li[data-track-label="activity"]');
+      const menuLink = menu.querySelector('a');
+      const submenuList = document.querySelector('ul.sidebar-sub-level-items');
+
+      submenuList.classList.add('fly-out-list');
+      menuLink.click();
+
+      expect(menu.dataset).toMatchObject({
+        trackAction: 'click_menu_item',
+        trackExtra: JSON.stringify({
+          sidebar_display: 'Collapsed',
+          menu_display: 'Fly out',
+        }),
+      });
+    });
+  });
+});

spec/lib/sidebars/projects/menus/learn_gitlab_menu_spec.rb

@@ -27,7 +27,6 @@ RSpec.describe Sidebars::Projects::Menus::LearnGitlabMenu do
       {
         class: 'home',
         data: {
-          track_action: 'click_menu',
           track_property: tracking_category,
           track_label: 'learn_gitlab'
         }