Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

5 files changed, 48 insertions, 20 deletions

diff --git a/app/assets/javascripts/search/store/actions.js b/app/assets/javascripts/search/store/actions.js
index b53557c0ec5..ee5e778f63d 100644
--- a/app/assets/javascripts/search/store/actions.js
+++ b/app/assets/javascripts/search/store/actions.js
@@ -46,38 +46,44 @@ export const fetchProjects = ({ commit, state }, search) => {
   }
 };
 
-export const loadFrequentGroups = async ({ commit }) => {
-  const data = loadDataFromLS(GROUPS_LOCAL_STORAGE_KEY);
-  commit(types.LOAD_FREQUENT_ITEMS, { key: GROUPS_LOCAL_STORAGE_KEY, data });
+export const preloadStoredFrequentItems = ({ commit }) => {
+  const storedGroups = loadDataFromLS(GROUPS_LOCAL_STORAGE_KEY);
+  commit(types.LOAD_FREQUENT_ITEMS, { key: GROUPS_LOCAL_STORAGE_KEY, data: storedGroups });
 
-  const promises = data.map((d) => Api.group(d.id));
+  const storedProjects = loadDataFromLS(PROJECTS_LOCAL_STORAGE_KEY);
+  commit(types.LOAD_FREQUENT_ITEMS, { key: PROJECTS_LOCAL_STORAGE_KEY, data: storedProjects });
+};
+
+export const loadFrequentGroups = async ({ commit, state }) => {
+  const storedData = state.frequentItems[GROUPS_LOCAL_STORAGE_KEY];
+  const promises = storedData.map((d) => Api.group(d.id));
   try {
-    const inflatedData = mergeById(await Promise.all(promises), data);
+    const inflatedData = mergeById(await Promise.all(promises), storedData);
     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 = 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));
+export const loadFrequentProjects = async ({ commit, state }) => {
+  const storedData = state.frequentItems[PROJECTS_LOCAL_STORAGE_KEY];
+  const promises = storedData.map((d) => Api.project(d.id).then((res) => res.data));
   try {
-    const inflatedData = mergeById(await Promise.all(promises), data);
+    const inflatedData = mergeById(await Promise.all(promises), storedData);
     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) => {
-  setFrequentItemToLS(GROUPS_LOCAL_STORAGE_KEY, state.frequentItems, item);
+export const setFrequentGroup = ({ state, commit }, item) => {
+  const frequentItems = setFrequentItemToLS(GROUPS_LOCAL_STORAGE_KEY, state.frequentItems, item);
+  commit(types.LOAD_FREQUENT_ITEMS, { key: GROUPS_LOCAL_STORAGE_KEY, data: frequentItems });
 };
 
-export const setFrequentProject = ({ state }, item) => {
-  setFrequentItemToLS(PROJECTS_LOCAL_STORAGE_KEY, state.frequentItems, item);
+export const setFrequentProject = ({ state, commit }, item) => {
+  const frequentItems = setFrequentItemToLS(PROJECTS_LOCAL_STORAGE_KEY, state.frequentItems, item);
+  commit(types.LOAD_FREQUENT_ITEMS, { key: PROJECTS_LOCAL_STORAGE_KEY, data: frequentItems });
 };
 
 export const setQuery = ({ commit }, { key, value }) => {
diff --git a/app/assets/javascripts/search/store/utils.js b/app/assets/javascripts/search/store/utils.js
index 60c09221ca9..b7d97213594 100644
--- a/app/assets/javascripts/search/store/utils.js
+++ b/app/assets/javascripts/search/store/utils.js
@@ -21,7 +21,7 @@ export const loadDataFromLS = (key) => {
 
 export const setFrequentItemToLS = (key, data, itemData) => {
   if (!AccessorUtilities.isLocalStorageAccessSafe()) {
-    return;
+    return [];
   }
 
   const keyList = [
@@ -66,9 +66,11 @@ export const setFrequentItemToLS = (key, data, itemData) => {
     // Note we do not need to commit a mutation here as immediately after this we refresh the page to
     // update the search results.
     localStorage.setItem(key, JSON.stringify(frequentItems));
+    return frequentItems;
   } catch {
     // The LS got in a bad state, let's wipe it
     localStorage.removeItem(key);
+    return [];
   }
 };
 
diff --git a/app/assets/javascripts/search/topbar/components/app.vue b/app/assets/javascripts/search/topbar/components/app.vue
index a490adbc11a..65114ee066e 100644
--- a/app/assets/javascripts/search/topbar/components/app.vue
+++ b/app/assets/javascripts/search/topbar/components/app.vue
@@ -39,8 +39,11 @@ export default {
       return !this.query.snippets || this.query.snippets === 'false';
     },
   },
+  created() {
+    this.preloadStoredFrequentItems();
+  },
   methods: {
-    ...mapActions(['applyQuery', 'setQuery']),
+    ...mapActions(['applyQuery', 'setQuery', 'preloadStoredFrequentItems']),
   },
 };
 </script>
diff --git a/app/assets/javascripts/search/topbar/components/group_filter.vue b/app/assets/javascripts/search/topbar/components/group_filter.vue
index 45a6ae73fac..e5edb21792a 100644
--- a/app/assets/javascripts/search/topbar/components/group_filter.vue
+++ b/app/assets/javascripts/search/topbar/components/group_filter.vue
@@ -18,12 +18,18 @@ export default {
     },
   },
   computed: {
-    ...mapState(['groups', 'fetchingGroups']),
+    ...mapState(['query', 'groups', 'fetchingGroups']),
     ...mapGetters(['frequentGroups']),
     selectedGroup() {
       return isEmpty(this.initialData) ? ANY_OPTION : this.initialData;
     },
   },
+  created() {
+    // This tracks groups searched via the top nav search bar
+    if (this.query.nav_source === 'navbar' && this.initialData?.id) {
+      this.setFrequentGroup(this.initialData);
+    }
+  },
   methods: {
     ...mapActions(['fetchGroups', 'setFrequentGroup', 'loadFrequentGroups']),
     handleGroupChange(group) {
@@ -33,7 +39,11 @@ export default {
       }
 
       visitUrl(
-        setUrlParams({ [GROUP_DATA.queryParam]: group.id, [PROJECT_DATA.queryParam]: null }),
+        setUrlParams({
+          [GROUP_DATA.queryParam]: group.id,
+          [PROJECT_DATA.queryParam]: null,
+          nav_source: null,
+        }),
       );
     },
   },
diff --git a/app/assets/javascripts/search/topbar/components/project_filter.vue b/app/assets/javascripts/search/topbar/components/project_filter.vue
index 1ca31db61e5..85cf2ddbbff 100644
--- a/app/assets/javascripts/search/topbar/components/project_filter.vue
+++ b/app/assets/javascripts/search/topbar/components/project_filter.vue
@@ -17,12 +17,18 @@ export default {
     },
   },
   computed: {
-    ...mapState(['projects', 'fetchingProjects']),
+    ...mapState(['query', 'projects', 'fetchingProjects']),
     ...mapGetters(['frequentProjects']),
     selectedProject() {
       return this.initialData ? this.initialData : ANY_OPTION;
     },
   },
+  created() {
+    // This tracks projects searched via the top nav search bar
+    if (this.query.nav_source === 'navbar' && this.initialData?.id) {
+      this.setFrequentProject(this.initialData);
+    }
+  },
   methods: {
     ...mapActions(['fetchProjects', 'setFrequentProject', 'loadFrequentProjects']),
     handleProjectChange(project) {
@@ -35,6 +41,7 @@ export default {
       const queryParams = {
         ...(project.namespace?.id && { [GROUP_DATA.queryParam]: project.namespace.id }),
         [PROJECT_DATA.queryParam]: project.id,
+        nav_source: null,
       };
 
       visitUrl(setUrlParams(queryParams));