Merge branch 'revert-tz-defer-frequent-item-init' into 'master'

Fix tracking of frequently visited projects / groups

See merge request gitlab-org/gitlab!46348

app/assets/javascripts/frequent_items/index.js

@@ -16,63 +16,53 @@ const frequentItemDropdowns = [
   },
 ];
 
-const initFrequentItemList = (namespace, key) => {
-  const el = document.getElementById(`js-${namespace}-dropdown`);
-
-  // Don't do anything if element doesn't exist (No groups dropdown)
-  // This is for when the user accesses GitLab without logging in
-  if (!el) {
-    return;
-  }
-
-  import('./components/app.vue')
-    .then(({ default: FrequentItems }) => {
-      // eslint-disable-next-line no-new
-      new Vue({
-        el,
-        data() {
-          const { dataset } = this.$options.el;
-          const item = {
-            id: Number(dataset[`${key}Id`]),
-            name: dataset[`${key}Name`],
-            namespace: dataset[`${key}Namespace`],
-            webUrl: dataset[`${key}WebUrl`],
-            avatarUrl: dataset[`${key}AvatarUrl`] || null,
-            lastAccessedOn: Date.now(),
-          };
-
-          return {
-            currentUserName: dataset.userName,
-            currentItem: item,
-          };
-        },
-        render(createElement) {
-          return createElement(FrequentItems, {
-            props: {
-              namespace,
-              currentUserName: this.currentUserName,
-              currentItem: this.currentItem,
-            },
-          });
-        },
-      });
-    })
-    .catch(() => {});
-};
-
 export default function initFrequentItemDropdowns() {
   frequentItemDropdowns.forEach(dropdown => {
     const { namespace, key } = dropdown;
+    const el = document.getElementById(`js-${namespace}-dropdown`);
     const navEl = document.getElementById(`nav-${namespace}-dropdown`);
 
     // Don't do anything if element doesn't exist (No groups dropdown)
     // This is for when the user accesses GitLab without logging in
-    if (!navEl) {
+    if (!el || !navEl) {
       return;
     }
 
+    import('./components/app.vue')
+      .then(({ default: FrequentItems }) => {
+        // eslint-disable-next-line no-new
+        new Vue({
+          el,
+          data() {
+            const { dataset } = this.$options.el;
+            const item = {
+              id: Number(dataset[`${key}Id`]),
+              name: dataset[`${key}Name`],
+              namespace: dataset[`${key}Namespace`],
+              webUrl: dataset[`${key}WebUrl`],
+              avatarUrl: dataset[`${key}AvatarUrl`] || null,
+              lastAccessedOn: Date.now(),
+            };
+
+            return {
+              currentUserName: dataset.userName,
+              currentItem: item,
+            };
+          },
+          render(createElement) {
+            return createElement(FrequentItems, {
+              props: {
+                namespace,
+                currentUserName: this.currentUserName,
+                currentItem: this.currentItem,
+              },
+            });
+          },
+        });
+      })
+      .catch(() => {});
+
     $(navEl).on('shown.bs.dropdown', () => {
-      initFrequentItemList(namespace, key);
       eventHub.$emit(`${namespace}-dropdownOpen`);
     });
   });

changelogs/unreleased/revert-tz-defer-frequent-item-init.yml

+---
+title: Fix tracking of frequently visited projects / groups
+merge_request: 46348
+author:
+type: fixed

spec/features/frequently_visited_projects_and_groups_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Frequently visited items', :js do
+  let_it_be(:user) { create(:user) }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'for projects' do
+    let_it_be(:project) { create(:project, :public) }
+
+    it 'increments localStorage counter when visiting the project' do
+      visit project_path(project)
+
+      frequent_projects = nil
+
+      wait_for('localStorage frequent-projects') do
+        frequent_projects = page.evaluate_script("localStorage['#{user.username}/frequent-projects']")
+
+        frequent_projects.present?
+      end
+
+      expect(Gitlab::Json.parse(frequent_projects)).to contain_exactly(a_hash_including('id' => project.id, 'frequency' => 1))
+    end
+  end
+
+  context 'for groups' do
+    let_it_be(:group) { create(:group, :public) }
+
+    it 'increments localStorage counter when visiting the group' do
+      visit group_path(group)
+
+      frequent_groups = nil
+
+      wait_for('localStorage frequent-groups') do
+        frequent_groups = page.evaluate_script("localStorage['#{user.username}/frequent-groups']")
+
+        frequent_groups.present?
+      end
+
+      expect(Gitlab::Json.parse(frequent_groups)).to contain_exactly(a_hash_including('id' => group.id, 'frequency' => 1))
+    end
+  end
+end