Merge branch '219152-tracking-add-invite-members-to-assignees-dropdown' into 'master'

Add Tracking for Invite Members on assignees dropdown

Closes #219152

See merge request gitlab-org/gitlab!33977

app/views/shared/issuable/_sidebar_assignees.html.haml

@@ -43,10 +43,14 @@
   - if experiment_enabled?(:invite_members_version_a) && can_import_members?
     - options[:dropdown_class] += ' dropdown-extended-height'
     - options[:footer_content] = true
+    - options[:wrapper_class] = 'js-sidebar-assignee-dropdown'
 
     = dropdown_tag(title, options: options) do
       %ul.dropdown-footer-list
         %li
-          = link_to _('Invite Members'), project_project_members_path(@project), title: _('Invite Members'), :"data-is-link" => true
+          = link_to _('Invite Members'),
+            project_project_members_path(@project),
+            title: _('Invite Members'),
+            data: { 'is-link': true, 'track-event': 'click_invite_members', 'track-label': 'edit_assignee' }
   - else
     = dropdown_tag(title, options: options)

ee/app/assets/javascripts/pages/projects/issues/show/index.js

@@ -2,6 +2,7 @@ import initSidebarBundle from 'ee/sidebar/sidebar_bundle';
 import initRelatedIssues from 'ee/related_issues';
 import initShow from '~/pages/projects/issues/show';
 import UserCallout from '~/user_callout';
+import trackShowInviteMemberLink from 'ee/projects/track_invite_members';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
@@ -14,4 +15,8 @@ document.addEventListener('DOMContentLoaded', () => {
   new UserCallout({ className: 'js-epics-sidebar-callout' });
   // eslint-disable-next-line no-new
   new UserCallout({ className: 'js-weight-sidebar-callout' });
+
+  const assigneeDropdown = document.querySelector('.js-sidebar-assignee-dropdown');
+
+  if (assigneeDropdown) trackShowInviteMemberLink(assigneeDropdown);
 });

ee/app/assets/javascripts/pages/projects/merge_requests/show/index.js

@@ -2,6 +2,7 @@ import initSidebarBundle from 'ee/sidebar/sidebar_bundle';
 import { initReviewBar } from '~/batch_comments';
 import initMrNotes from '~/mr_notes';
 import initShow from '~/pages/projects/merge_requests/init_merge_request_show';
+import trackShowInviteMemberLink from 'ee/projects/track_invite_members';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
@@ -10,4 +11,8 @@ document.addEventListener('DOMContentLoaded', () => {
   }
   initMrNotes();
   initReviewBar();
+
+  const assigneeDropdown = document.querySelector('.js-sidebar-assignee-dropdown');
+
+  if (assigneeDropdown) trackShowInviteMemberLink(assigneeDropdown);
 });

ee/app/assets/javascripts/projects/track_invite_members.js

+import $ from 'jquery';
+import Tracking from '~/tracking';
+
+export default function(assigneeDropdown) {
+  const trackEvent = 'show_invite_members';
+  const trackLabel = 'edit_assignee';
+
+  $(assigneeDropdown).on('shown.bs.dropdown', () => {
+    Tracking.event(undefined, trackEvent, {
+      label: trackLabel,
+    });
+  });
+}

ee/spec/frontend/projects/track_invite_members_spec.js

+import $ from 'jquery';
+import trackShowInviteMemberLink from 'ee/projects/track_invite_members';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+
+describe('Track user dropdown open', () => {
+  let trackingSpy;
+  let selector;
+
+  beforeEach(() => {
+    setFixtures(`
+      <div class="js-sidebar-assignee-dropdown">
+      </div>`);
+
+    selector = $('.js-sidebar-assignee-dropdown');
+    trackingSpy = mockTracking('_category_', selector.element, jest.spyOn);
+    document.body.dataset.page = 'some:page';
+
+    trackShowInviteMemberLink(selector);
+  });
+
+  afterEach(() => {
+    unmockTracking();
+  });
+
+  it('sends a tracking event when the dropdown is opened and contains Invite Members link', () => {
+    selector.trigger('shown.bs.dropdown');
+
+    expect(trackingSpy).toHaveBeenCalledWith(undefined, 'show_invite_members', {
+      label: 'edit_assignee',
+    });
+  });
+});

spec/features/issues/issue_sidebar_spec.rb

@@ -55,6 +55,8 @@ describe 'Issue Sidebar' do
         it 'sees link to invite members' do
           page.within '.dropdown-menu-user' do
             expect(page).to have_link('Invite Members', href: project_project_members_path(project))
+            expect(page).to have_selector('[data-track-event="click_invite_members"]')
+            expect(page).to have_selector("[data-track-label='edit_assignee']")
           end
         end
       end

spec/features/merge_request/user_edits_assignees_sidebar_spec.rb

@@ -112,6 +112,8 @@ describe 'Merge request > User edits assignees sidebar', :js do
       it 'sees link to invite members' do
         page.within '.dropdown-menu-user' do
           expect(page).to have_link('Invite Members', href: project_project_members_path(project))
+          expect(page).to have_selector('[data-track-event="click_invite_members"]')
+          expect(page).to have_selector("[data-track-label='edit_assignee']")
         end
       end
     end