Merge branch 'move-cohorts-fe-usage-ping-to-redis' into 'master'

Move cohorts FE tracking to Redis [RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!54329

app/assets/javascripts/admin/users/tabs.js

+import Api from '~/api';
 import { historyPushState } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
 const COHORTS_PANE = 'cohorts';
+const COHORTS_PANE_TAB_CLICK_EVENT = 'i_analytics_cohorts';
 
 const tabClickHandler = (e) => {
   const { hash } = e.currentTarget;
-  const tab = hash === `#${COHORTS_PANE}` ? COHORTS_PANE : null;
+
+  let tab = null;
+
+  if (hash === `#${COHORTS_PANE}`) {
+    tab = COHORTS_PANE;
+    Api.trackRedisHllUserEvent(COHORTS_PANE_TAB_CLICK_EVENT);
+  }
+
   const newUrl = mergeUrlParams({ tab }, window.location.href);
   historyPushState(newUrl);
 };

app/views/admin/users/index.html.haml

@@ -5,7 +5,7 @@
     %a.nav-link{ href: '#users', class: active_when(params[:tab] != 'cohorts'), data: { toggle: 'tab' }, role: 'tab' }
       = s_('AdminUsers|Users')
   %li.nav-item.js-users-tab-item{ role: 'presentation' }
-    %a.nav-link{ href: '#cohorts', class: active_when(params[:tab] == 'cohorts'), data: { toggle: 'tab', track: { event: 'i_analytics_cohorts', action: 'click_tab' } }, role: 'tab' }
+    %a.nav-link{ href: '#cohorts', class: active_when(params[:tab] == 'cohorts'), data: { toggle: 'tab' }, role: 'tab' }
       = s_('AdminUsers|Cohorts')
 
 .tab-content

config/feature_flags/development/usage_data_i_analytics_cohorts.yml

+---
+name: usage_data_i_analytics_cohorts
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54329
+rollout_issue_url:
+milestone: '13.9'
+type: development
+group: group::optimize
+default_enabled: true

spec/frontend/admin/users/tabs_spec.js

+import initTabs from '~/admin/users/tabs';
+import Api from '~/api';
+
+jest.mock('~/api.js');
+jest.mock('~/lib/utils/common_utils');
+
+describe('tabs', () => {
+  beforeEach(() => {
+    setFixtures(`
+    <div>
+      <div class="js-users-tab-item">
+        <a href="#users" data-testid='users-tab'>Users</a>
+      </div>
+      <div class="js-users-tab-item">
+        <a href="#cohorts" data-testid='cohorts-tab'>Cohorts</a>
+      </div>
+    </div`);
+
+    initTabs();
+  });
+
+  afterEach(() => {});
+
+  describe('tracking', () => {
+    it('tracks event when cohorts tab is clicked', () => {
+      document.querySelector('[data-testid="cohorts-tab"]').click();
+
+      expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith('i_analytics_cohorts');
+    });
+
+    it('does not track an event when users tab is clicked', () => {
+      document.querySelector('[data-testid="users-tab"]').click();
+
+      expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
+    });
+  });
+});