Add latest changes from gitlab-org/gitlab@master

5 files changed, 44 insertions, 12 deletions

diff --git a/app/assets/javascripts/search/store/actions.js b/app/assets/javascripts/search/store/actions.js
index f8c795b2aaf..eaf164d5591 100644
--- a/app/assets/javascripts/search/store/actions.js
+++ b/app/assets/javascripts/search/store/actions.js
@@ -4,7 +4,7 @@ import { visitUrl, setUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from './constants';
 import * as types from './mutation_types';
-import { loadDataFromLS, setFrequentItemToLS } from './utils';
+import { loadDataFromLS, setFrequentItemToLS, mergeById } from './utils';
 
 export const fetchGroups = ({ commit }, search) => {
   commit(types.REQUEST_GROUPS);
@@ -41,14 +41,30 @@ export const fetchProjects = ({ commit, state }, search) => {
   }
 };
 
-export const loadFrequentGroups = ({ commit }) => {
+export const loadFrequentGroups = async ({ commit }) => {
   const data = loadDataFromLS(GROUPS_LOCAL_STORAGE_KEY);
   commit(types.LOAD_FREQUENT_ITEMS, { key: GROUPS_LOCAL_STORAGE_KEY, data });
+
+  const promises = data.map((d) => Api.group(d.id));
+  try {
+    const inflatedData = mergeById(await Promise.all(promises), data);
+    commit(types.LOAD_FREQUENT_ITEMS, { key: GROUPS_LOCAL_STORAGE_KEY, data: inflatedData });
+  } catch {
+    createFlash({ message: __('There was a problem fetching recent groups.') });
+  }
 };
 
-export const loadFrequentProjects = ({ commit }) => {
+export const loadFrequentProjects = async ({ commit }) => {
   const data = loadDataFromLS(PROJECTS_LOCAL_STORAGE_KEY);
   commit(types.LOAD_FREQUENT_ITEMS, { key: PROJECTS_LOCAL_STORAGE_KEY, data });
+
+  const promises = data.map((d) => Api.project(d.id).then((res) => res.data));
+  try {
+    const inflatedData = mergeById(await Promise.all(promises), data);
+    commit(types.LOAD_FREQUENT_ITEMS, { key: PROJECTS_LOCAL_STORAGE_KEY, data: inflatedData });
+  } catch {
+    createFlash({ message: __('There was a problem fetching recent projects.') });
+  }
 };
 
 export const setFrequentGroup = ({ state }, item) => {
diff --git a/app/assets/javascripts/search/store/utils.js b/app/assets/javascripts/search/store/utils.js
index 6128f9f0b81..9f058efeaa7 100644
--- a/app/assets/javascripts/search/store/utils.js
+++ b/app/assets/javascripts/search/store/utils.js
@@ -1,6 +1,10 @@
 import AccessorUtilities from '../../lib/utils/accessor';
 import { MAX_FREQUENT_ITEMS, MAX_FREQUENCY } from './constants';
 
+function extractKeys(object, keyList) {
+  return Object.fromEntries(keyList.map((key) => [key, object[key]]));
+}
+
 export const loadDataFromLS = (key) => {
   if (!AccessorUtilities.isLocalStorageAccessSafe()) {
     return [];
@@ -15,13 +19,16 @@ export const loadDataFromLS = (key) => {
   }
 };
 
-export const setFrequentItemToLS = (key, data, item) => {
+export const setFrequentItemToLS = (key, data, itemData) => {
   if (!AccessorUtilities.isLocalStorageAccessSafe()) {
     return;
   }
 
+  const keyList = ['id', 'avatar_url', 'name', 'full_name', 'name_with_namespace', 'frequency'];
+
   try {
-    const frequentItems = data[key];
+    const frequentItems = data[key].map((obj) => extractKeys(obj, keyList));
+    const item = extractKeys(itemData, keyList);
     const existingItemIndex = frequentItems.findIndex((i) => i.id === item.id);
 
     if (existingItemIndex >= 0) {
@@ -34,7 +41,7 @@ export const setFrequentItemToLS = (key, data, item) => {
         frequentItems.pop();
       }
 
-      frequentItems.push({ id: item.id, frequency: 1 });
+      frequentItems.push({ ...item, frequency: 1 });
     }
 
     // Sort by frequency
@@ -48,3 +55,10 @@ export const setFrequentItemToLS = (key, data, item) => {
     localStorage.removeItem(key);
   }
 };
+
+export const mergeById = (inflatedData, storedData) => {
+  return inflatedData.map((data) => {
+    const stored = storedData?.find((d) => d.id === data.id) || {};
+    return { ...stored, ...data };
+  });
+};
diff --git a/app/assets/javascripts/search/topbar/components/group_filter.vue b/app/assets/javascripts/search/topbar/components/group_filter.vue
index c97892e7fec..2040d2ca173 100644
--- a/app/assets/javascripts/search/topbar/components/group_filter.vue
+++ b/app/assets/javascripts/search/topbar/components/group_filter.vue
@@ -23,9 +23,6 @@ export default {
       return isEmpty(this.initialData) ? ANY_OPTION : this.initialData;
     },
   },
-  created() {
-    this.loadFrequentGroups();
-  },
   methods: {
     ...mapActions(['fetchGroups', 'setFrequentGroup', 'loadFrequentGroups']),
     handleGroupChange(group) {
@@ -52,6 +49,7 @@ export default {
     :loading="fetchingGroups"
     :selected-item="selectedGroup"
     :items="groups"
+    @first-open="loadFrequentGroups"
     @search="fetchGroups"
     @change="handleGroupChange"
   />
diff --git a/app/assets/javascripts/search/topbar/components/project_filter.vue b/app/assets/javascripts/search/topbar/components/project_filter.vue
index 1440876afbc..8589276e9f3 100644
--- a/app/assets/javascripts/search/topbar/components/project_filter.vue
+++ b/app/assets/javascripts/search/topbar/components/project_filter.vue
@@ -22,9 +22,6 @@ export default {
       return this.initialData ? this.initialData : ANY_OPTION;
     },
   },
-  created() {
-    this.loadFrequentProjects();
-  },
   methods: {
     ...mapActions(['fetchProjects', 'setFrequentProject', 'loadFrequentProjects']),
     handleProjectChange(project) {
@@ -55,6 +52,7 @@ export default {
     :loading="fetchingProjects"
     :selected-item="selectedProject"
     :items="projects"
+    @first-open="loadFrequentProjects"
     @search="fetchProjects"
     @change="handleProjectChange"
   />
diff --git a/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue b/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue
index e166e44f5f4..488fee90fca 100644
--- a/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue
+++ b/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue
@@ -65,6 +65,7 @@ export default {
   data() {
     return {
       searchText: '',
+      hasBeenOpened: false,
     };
   },
   methods: {
@@ -72,6 +73,11 @@ export default {
       return selected.id === this.selectedItem.id;
     },
     openDropdown() {
+      if (!this.hasBeenOpened) {
+        this.hasBeenOpened = true;
+        this.$emit('first-open');
+      }
+
       this.$emit('search', this.searchText);
     },
     resetDropdown() {