Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

8 files changed, 60 insertions, 22 deletions

diff --git a/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue b/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
index 9f4f4768247..c0e2c18bece 100644
--- a/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
+++ b/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
@@ -4,20 +4,28 @@ import {
   GlDropdownSectionHeader,
   GlDropdownDivider,
   GlAvatar,
+  GlAlert,
   GlLoadingIcon,
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
+import { s__ } from '~/locale';
 import highlight from '~/lib/utils/highlight';
 import { GROUPS_CATEGORY, PROJECTS_CATEGORY, LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '../constants';
 
 export default {
   name: 'HeaderSearchAutocompleteItems',
+  i18n: {
+    autocompleteErrorMessage: s__(
+      'GlobalSearch|There was an error fetching search autocomplete suggestions.',
+    ),
+  },
   components: {
     GlDropdownItem,
     GlDropdownSectionHeader,
     GlDropdownDivider,
     GlAvatar,
+    GlAlert,
     GlLoadingIcon,
   },
   directives: {
@@ -31,7 +39,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['search', 'loading']),
+    ...mapState(['search', 'loading', 'autocompleteError']),
     ...mapGetters(['autocompleteGroupedSearchOptions']),
   },
   watch: {
@@ -93,5 +101,13 @@ export default {
       </div>
     </template>
     <gl-loading-icon v-else size="lg" class="my-4" />
+    <gl-alert
+      v-if="autocompleteError"
+      class="gl-text-body gl-mt-2"
+      :dismissible="false"
+      variant="danger"
+    >
+      {{ $options.i18n.autocompleteErrorMessage }}
+    </gl-alert>
   </div>
 </template>
diff --git a/app/assets/javascripts/header_search/components/header_search_default_items.vue b/app/assets/javascripts/header_search/components/header_search_default_items.vue
index 53e63bc6cca..04deaba7b0f 100644
--- a/app/assets/javascripts/header_search/components/header_search_default_items.vue
+++ b/app/assets/javascripts/header_search/components/header_search_default_items.vue
@@ -24,8 +24,8 @@ export default {
     ...mapGetters(['defaultSearchOptions']),
     sectionHeader() {
       return (
-        this.searchContext.project?.name ||
-        this.searchContext.group?.name ||
+        this.searchContext?.project?.name ||
+        this.searchContext?.group?.name ||
         this.$options.i18n.allGitLab
       );
     },
diff --git a/app/assets/javascripts/header_search/index.js b/app/assets/javascripts/header_search/index.js
index d7e21f55ea5..4af8513ecdb 100644
--- a/app/assets/javascripts/header_search/index.js
+++ b/app/assets/javascripts/header_search/index.js
@@ -5,7 +5,7 @@ import createStore from './store';
 
 Vue.use(Translate);
 
-export const initHeaderSearchApp = () => {
+export const initHeaderSearchApp = (search = '') => {
   const el = document.getElementById('js-header-search');
 
   if (!el) {
@@ -18,7 +18,7 @@ export const initHeaderSearchApp = () => {
 
   return new Vue({
     el,
-    store: createStore({ searchPath, issuesPath, mrPath, autocompletePath, searchContext }),
+    store: createStore({ searchPath, issuesPath, mrPath, autocompletePath, searchContext, search }),
     render(createElement) {
       return createElement(HeaderSearchApp);
     },
diff --git a/app/assets/javascripts/header_search/store/actions.js b/app/assets/javascripts/header_search/store/actions.js
index 0ba956f3ed1..ee4c312fed0 100644
--- a/app/assets/javascripts/header_search/store/actions.js
+++ b/app/assets/javascripts/header_search/store/actions.js
@@ -1,6 +1,4 @@
-import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
 import * as types from './mutation_types';
 
 export const fetchAutocompleteOptions = ({ commit, getters }) => {
@@ -10,7 +8,6 @@ export const fetchAutocompleteOptions = ({ commit, getters }) => {
     .then(({ data }) => commit(types.RECEIVE_AUTOCOMPLETE_SUCCESS, data))
     .catch(() => {
       commit(types.RECEIVE_AUTOCOMPLETE_ERROR);
-      createFlash({ message: __('There was an error fetching search autocomplete suggestions') });
     });
 };
 
diff --git a/app/assets/javascripts/header_search/store/getters.js b/app/assets/javascripts/header_search/store/getters.js
index a1348a8aa3f..87dec95153f 100644
--- a/app/assets/javascripts/header_search/store/getters.js
+++ b/app/assets/javascripts/header_search/store/getters.js
@@ -17,9 +17,12 @@ export const searchQuery = (state) => {
     {
       search: state.search,
       nav_source: 'navbar',
-      project_id: state.searchContext.project?.id,
-      group_id: state.searchContext.group?.id,
+      project_id: state.searchContext?.project?.id,
+      group_id: state.searchContext?.group?.id,
       scope: state.searchContext?.scope,
+      snippets: state.searchContext?.for_snippets ? true : null,
+      search_code: state.searchContext?.code_search ? true : null,
+      repository_ref: state.searchContext?.ref,
     },
     isNil,
   );
@@ -31,7 +34,7 @@ export const autocompleteQuery = (state) => {
   const query = omitBy(
     {
       term: state.search,
-      project_id: state.searchContext.project?.id,
+      project_id: state.searchContext?.project?.id,
       project_ref: state.searchContext?.ref,
     },
     isNil,
@@ -42,16 +45,16 @@ export const autocompleteQuery = (state) => {
 
 export const scopedIssuesPath = (state) => {
   return (
-    state.searchContext.project_metadata?.issues_path ||
-    state.searchContext.group_metadata?.issues_path ||
+    state.searchContext?.project_metadata?.issues_path ||
+    state.searchContext?.group_metadata?.issues_path ||
     state.issuesPath
   );
 };
 
 export const scopedMRPath = (state) => {
   return (
-    state.searchContext.project_metadata?.mr_path ||
-    state.searchContext.group_metadata?.mr_path ||
+    state.searchContext?.project_metadata?.mr_path ||
+    state.searchContext?.group_metadata?.mr_path ||
     state.mrPath
   );
 };
@@ -96,6 +99,9 @@ export const projectUrl = (state) => {
       project_id: state.searchContext?.project?.id,
       group_id: state.searchContext?.group?.id,
       scope: state.searchContext?.scope,
+      snippets: state.searchContext?.for_snippets ? true : null,
+      search_code: state.searchContext?.code_search ? true : null,
+      repository_ref: state.searchContext?.ref,
     },
     isNil,
   );
@@ -110,6 +116,9 @@ export const groupUrl = (state) => {
       nav_source: 'navbar',
       group_id: state.searchContext?.group?.id,
       scope: state.searchContext?.scope,
+      snippets: state.searchContext?.for_snippets ? true : null,
+      search_code: state.searchContext?.code_search ? true : null,
+      repository_ref: state.searchContext?.ref,
     },
     isNil,
   );
@@ -123,6 +132,9 @@ export const allUrl = (state) => {
       search: state.search,
       nav_source: 'navbar',
       scope: state.searchContext?.scope,
+      snippets: state.searchContext?.for_snippets ? true : null,
+      search_code: state.searchContext?.code_search ? true : null,
+      repository_ref: state.searchContext?.ref,
     },
     isNil,
   );
@@ -133,19 +145,19 @@ export const allUrl = (state) => {
 export const scopedSearchOptions = (state, getters) => {
   const options = [];
 
-  if (state.searchContext.project) {
+  if (state.searchContext?.project) {
     options.push({
       html_id: 'scoped-in-project',
-      scope: state.searchContext.project.name,
+      scope: state.searchContext.project?.name || '',
       description: MSG_IN_PROJECT,
       url: getters.projectUrl,
     });
   }
 
-  if (state.searchContext.group) {
+  if (state.searchContext?.group) {
     options.push({
       html_id: 'scoped-in-group',
-      scope: state.searchContext.group.name,
+      scope: state.searchContext.group?.name || '',
       description: MSG_IN_GROUP,
       url: getters.groupUrl,
     });
diff --git a/app/assets/javascripts/header_search/store/index.js b/app/assets/javascripts/header_search/store/index.js
index 06cca4be8a7..b83433c5b49 100644
--- a/app/assets/javascripts/header_search/store/index.js
+++ b/app/assets/javascripts/header_search/store/index.js
@@ -13,11 +13,12 @@ export const getStoreConfig = ({
   mrPath,
   autocompletePath,
   searchContext,
+  search,
 }) => ({
   actions,
   getters,
   mutations,
-  state: createState({ searchPath, issuesPath, mrPath, autocompletePath, searchContext }),
+  state: createState({ searchPath, issuesPath, mrPath, autocompletePath, searchContext, search }),
 });
 
 const createStore = (config) => new Vuex.Store(getStoreConfig(config));
diff --git a/app/assets/javascripts/header_search/store/mutations.js b/app/assets/javascripts/header_search/store/mutations.js
index 26b4a8854fe..92948bec515 100644
--- a/app/assets/javascripts/header_search/store/mutations.js
+++ b/app/assets/javascripts/header_search/store/mutations.js
@@ -4,19 +4,23 @@ export default {
   [types.REQUEST_AUTOCOMPLETE](state) {
     state.loading = true;
     state.autocompleteOptions = [];
+    state.autocompleteError = false;
   },
   [types.RECEIVE_AUTOCOMPLETE_SUCCESS](state, data) {
     state.loading = false;
     state.autocompleteOptions = data.map((d, i) => {
       return { html_id: `autocomplete-${d.category}-${i}`, ...d };
     });
+    state.autocompleteError = false;
   },
   [types.RECEIVE_AUTOCOMPLETE_ERROR](state) {
     state.loading = false;
     state.autocompleteOptions = [];
+    state.autocompleteError = true;
   },
   [types.CLEAR_AUTOCOMPLETE](state) {
     state.autocompleteOptions = [];
+    state.autocompleteError = false;
   },
   [types.SET_SEARCH](state, value) {
     state.search = value;
diff --git a/app/assets/javascripts/header_search/store/state.js b/app/assets/javascripts/header_search/store/state.js
index 3d4073f0583..bebdbc7b92e 100644
--- a/app/assets/javascripts/header_search/store/state.js
+++ b/app/assets/javascripts/header_search/store/state.js
@@ -1,11 +1,19 @@
-const createState = ({ searchPath, issuesPath, mrPath, autocompletePath, searchContext }) => ({
+const createState = ({
   searchPath,
   issuesPath,
   mrPath,
   autocompletePath,
   searchContext,
-  search: '',
+  search,
+}) => ({
+  searchPath,
+  issuesPath,
+  mrPath,
+  autocompletePath,
+  searchContext,
+  search,
   autocompleteOptions: [],
+  autocompleteError: false,
   loading: false,
 });
 export default createState;