Add latest changes from gitlab-org/gitlab@master

6 files changed, 48 insertions, 92 deletions

diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue
index ace0d77c431..c0a06706fc6 100644
--- a/app/assets/javascripts/header_search/components/app.vue
+++ b/app/assets/javascripts/header_search/components/app.vue
@@ -12,10 +12,20 @@ import { debounce } from 'lodash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { truncate } from '~/lib/utils/text_utility';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
-import { s__, sprintf } from '~/locale';
+import { sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
 import {
+  SEARCH_GITLAB,
+  SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN,
+  SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN,
+  SEARCH_DESCRIBED_BY_DEFAULT,
+  SEARCH_DESCRIBED_BY_UPDATED,
+  SEARCH_RESULTS_LOADING,
+  SEARCH_RESULTS_SCOPE,
+  KBD_HELP,
+} from '~/vue_shared/global_search/constants';
+import {
   FIRST_DROPDOWN_INDEX,
   SEARCH_BOX_INDEX,
   SEARCH_INPUT_DESCRIPTION,
@@ -34,26 +44,14 @@ import HeaderSearchScopedItems from './header_search_scoped_items.vue';
 export default {
   name: 'HeaderSearchApp',
   i18n: {
-    searchGitlab: s__('GlobalSearch|Search GitLab'),
-    searchInputDescribeByNoDropdown: s__(
-      'GlobalSearch|Type and press the enter key to submit search.',
-    ),
-    searchInputDescribeByWithDropdown: s__(
-      'GlobalSearch|Type for new suggestions to appear below.',
-    ),
-    searchDescribedByDefault: s__(
-      'GlobalSearch|%{count} default results provided. Use the up and down arrow keys to navigate search results list.',
-    ),
-    searchDescribedByUpdated: s__(
-      'GlobalSearch|Results updated. %{count} results available. Use the up and down arrow keys to navigate search results list, or ENTER to submit.',
-    ),
-    searchResultsLoading: s__('GlobalSearch|Search results are loading'),
-    searchResultsScope: s__('GlobalSearch|in %{scope}'),
-    kbdHelp: sprintf(
-      s__('GlobalSearch|Use the shortcut key %{kbdOpen}/%{kbdClose} to start a search'),
-      { kbdOpen: '<kbd>', kbdClose: '</kbd>' },
-      false,
-    ),
+    SEARCH_GITLAB,
+    SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN,
+    SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN,
+    SEARCH_DESCRIBED_BY_DEFAULT,
+    SEARCH_DESCRIBED_BY_UPDATED,
+    SEARCH_RESULTS_LOADING,
+    SEARCH_RESULTS_SCOPE,
+    KBD_HELP,
   },
   directives: { Outside, GlTooltip: GlTooltipDirective, GlResizeObserverDirective },
   components: {
@@ -113,9 +111,9 @@ export default {
 
     searchInputDescribeBy() {
       if (this.isLoggedIn) {
-        return this.$options.i18n.searchInputDescribeByWithDropdown;
+        return this.$options.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN;
       }
-      return this.$options.i18n.searchInputDescribeByNoDropdown;
+      return this.$options.i18n.SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN;
     },
     dropdownResultsDescription() {
       if (!this.showSearchDropdown) {
@@ -123,14 +121,14 @@ export default {
       }
 
       if (this.showDefaultItems) {
-        return sprintf(this.$options.i18n.searchDescribedByDefault, {
+        return sprintf(this.$options.i18n.SEARCH_DESCRIBED_BY_DEFAULT, {
           count: this.searchOptions.length,
         });
       }
 
       return this.loading
-        ? this.$options.i18n.searchResultsLoading
-        : sprintf(this.$options.i18n.searchDescribedByUpdated, {
+        ? this.$options.i18n.SEARCH_RESULTS_LOADING
+        : sprintf(this.$options.i18n.SEARCH_DESCRIBED_BY_UPDATED, {
             count: this.searchOptions.length,
           });
     },
@@ -154,7 +152,7 @@ export default {
       return this.searchBarItem?.icon;
     },
     scopeTokenTitle() {
-      return sprintf(this.$options.i18n.searchResultsScope, {
+      return sprintf(this.$options.i18n.SEARCH_RESULTS_SCOPE, {
         scope: this.infieldHelpContent,
       });
     },
@@ -230,7 +228,7 @@ export default {
   <form
     v-outside="closeDropdown"
     role="search"
-    :aria-label="$options.i18n.searchGitlab"
+    :aria-label="$options.i18n.SEARCH_GITLAB"
     class="header-search gl-relative gl-rounded-base gl-w-full"
     :class="searchBarClasses"
     data-testid="header-search-form"
@@ -243,7 +241,7 @@ export default {
       class="gl-z-index-1"
       data-qa-selector="search_term_field"
       autocomplete="off"
-      :placeholder="$options.i18n.searchGitlab"
+      :placeholder="$options.i18n.SEARCH_GITLAB"
       :aria-activedescendant="currentFocusedId"
       :aria-describedby="$options.SEARCH_INPUT_DESCRIPTION"
       @focus="openDropdown"
@@ -267,7 +265,7 @@ export default {
         :size="16"
       />{{
         getTruncatedScope(
-          sprintf($options.i18n.searchResultsScope, {
+          sprintf($options.i18n.SEARCH_RESULTS_SCOPE, {
             scope: infieldHelpContent,
           }),
         )
@@ -277,7 +275,7 @@ export default {
       v-show="!isFocused"
       v-gl-tooltip.bottom.hover.html
       class="gl-absolute gl-right-3 gl-top-0 gl-z-index-1 keyboard-shortcut-helper"
-      :title="$options.i18n.kbdHelp"
+      :title="$options.i18n.KBD_HELP"
       >/</kbd
     >
     <span :id="$options.SEARCH_INPUT_DESCRIPTION" role="region" class="gl-sr-only">{{
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 c85fb4f4158..1838214def6 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
@@ -9,27 +9,23 @@ import {
 } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { s__ } from '~/locale';
 import highlight from '~/lib/utils/highlight';
 import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
 import { truncateNamespace } from '~/lib/utils/text_utility';
-
 import {
   GROUPS_CATEGORY,
   PROJECTS_CATEGORY,
   MERGE_REQUEST_CATEGORY,
   ISSUES_CATEGORY,
   RECENT_EPICS_CATEGORY,
-  LARGE_AVATAR_PX,
-  SMALL_AVATAR_PX,
-} from '../constants';
+  AUTOCOMPLETE_ERROR_MESSAGE,
+} from '~/vue_shared/global_search/constants';
+import { LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '../constants';
 
 export default {
   name: 'HeaderSearchAutocompleteItems',
   i18n: {
-    autocompleteErrorMessage: s__(
-      'GlobalSearch|There was an error fetching search autocomplete suggestions.',
-    ),
+    AUTOCOMPLETE_ERROR_MESSAGE,
   },
   components: {
     GlDropdownItem,
@@ -165,7 +161,7 @@ export default {
       :dismissible="false"
       variant="danger"
     >
-      {{ $options.i18n.autocompleteErrorMessage }}
+      {{ $options.i18n.AUTOCOMPLETE_ERROR_MESSAGE }}
     </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 04deaba7b0f..f0d398297e9 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
@@ -1,12 +1,12 @@
 <script>
 import { GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
-import { __ } from '~/locale';
+import { ALL_GITLAB } from '~/vue_shared/global_search/constants';
 
 export default {
   name: 'HeaderSearchDefaultItems',
   i18n: {
-    allGitLab: __('All GitLab'),
+    ALL_GITLAB,
   },
   components: {
     GlDropdownSectionHeader,
@@ -26,7 +26,7 @@ export default {
       return (
         this.searchContext?.project?.name ||
         this.searchContext?.group?.name ||
-        this.$options.i18n.allGitLab
+        this.$options.i18n.ALL_GITLAB
       );
     },
   },
diff --git a/app/assets/javascripts/header_search/components/header_search_scoped_items.vue b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
index f5be1bcb786..1ef88492b23 100644
--- a/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
+++ b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
@@ -3,10 +3,14 @@ import { GlDropdownItem, GlIcon, GlToken } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import { s__, sprintf } from '~/locale';
 import { truncate } from '~/lib/utils/text_utility';
+import { SCOPED_SEARCH_ITEM_ARIA_LABEL } from '~/vue_shared/global_search/constants';
 import { SCOPE_TOKEN_MAX_LENGTH } from '../constants';
 
 export default {
   name: 'HeaderSearchScopedItems',
+  i18n: {
+    SCOPED_SEARCH_ITEM_ARIA_LABEL,
+  },
   components: {
     GlDropdownItem,
     GlIcon,
@@ -28,7 +32,7 @@ export default {
       return this.currentFocusedOption?.html_id === option.html_id;
     },
     ariaLabel(option) {
-      return sprintf(s__('GlobalSearch| %{search} %{description} %{scope}'), {
+      return sprintf(this.$options.i18n.SCOPED_SEARCH_ITEM_ARIA_LABEL, {
         search: this.search,
         description: option.description || option.icon,
         scope: option.scope || '',
diff --git a/app/assets/javascripts/header_search/constants.js b/app/assets/javascripts/header_search/constants.js
index 76fbf664913..b9bb4e573fd 100644
--- a/app/assets/javascripts/header_search/constants.js
+++ b/app/assets/javascripts/header_search/constants.js
@@ -1,41 +1,9 @@
-import { s__ } from '~/locale';
-
-export const MSG_ISSUES_ASSIGNED_TO_ME = s__('GlobalSearch|Issues assigned to me');
-
-export const MSG_ISSUES_IVE_CREATED = s__("GlobalSearch|Issues I've created");
-
-export const MSG_MR_ASSIGNED_TO_ME = s__('GlobalSearch|Merge requests assigned to me');
-
-export const MSG_MR_IM_REVIEWER = s__("GlobalSearch|Merge requests that I'm a reviewer");
-
-export const MSG_MR_IVE_CREATED = s__("GlobalSearch|Merge requests I've created");
-
-export const MSG_IN_ALL_GITLAB = s__('GlobalSearch|all GitLab');
-
 export const ICON_PROJECT = 'project';
 
 export const ICON_GROUP = 'group';
 
 export const ICON_SUBGROUP = 'subgroup';
 
-export const GROUPS_CATEGORY = s__('GlobalSearch|Groups');
-
-export const PROJECTS_CATEGORY = s__('GlobalSearch|Projects');
-
-export const USERS_CATEGORY = s__('GlobalSearch|Users');
-
-export const ISSUES_CATEGORY = s__('GlobalSearch|Recent issues');
-
-export const MERGE_REQUEST_CATEGORY = s__('GlobalSearch|Recent merge requests');
-
-export const RECENT_EPICS_CATEGORY = s__('GlobalSearch|Recent epics');
-
-export const IN_THIS_PROJECT_CATEGORY = s__('GlobalSearch|In this project');
-
-export const SETTINGS_CATEGORY = s__('GlobalSearch|Settings');
-
-export const HELP_CATEGORY = s__('GlobalSearch|Help');
-
 export const LARGE_AVATAR_PX = 32;
 
 export const SMALL_AVATAR_PX = 16;
@@ -60,18 +28,6 @@ export const IS_SEARCHING = 'is-searching';
 export const IS_FOCUSED = 'is-focused';
 export const IS_NOT_FOCUSED = 'is-not-focused';
 
-export const DROPDOWN_ORDER = [
-  MERGE_REQUEST_CATEGORY,
-  ISSUES_CATEGORY,
-  RECENT_EPICS_CATEGORY,
-  GROUPS_CATEGORY,
-  PROJECTS_CATEGORY,
-  USERS_CATEGORY,
-  IN_THIS_PROJECT_CATEGORY,
-  SETTINGS_CATEGORY,
-  HELP_CATEGORY,
-];
-
 export const FETCH_TYPES = ['generic', 'search'];
 
 export const SEARCH_INPUT_FIELD_MAX_WIDTH = '640px';
diff --git a/app/assets/javascripts/header_search/store/getters.js b/app/assets/javascripts/header_search/store/getters.js
index 3dec857930d..f86463b94d1 100644
--- a/app/assets/javascripts/header_search/store/getters.js
+++ b/app/assets/javascripts/header_search/store/getters.js
@@ -7,14 +7,16 @@ import {
   MSG_MR_ASSIGNED_TO_ME,
   MSG_MR_IM_REVIEWER,
   MSG_MR_IVE_CREATED,
-  ICON_GROUP,
-  ICON_SUBGROUP,
-  ICON_PROJECT,
   MSG_IN_ALL_GITLAB,
   PROJECTS_CATEGORY,
   GROUPS_CATEGORY,
-  SEARCH_SHORTCUTS_MIN_CHARACTERS,
   DROPDOWN_ORDER,
+} from '~/vue_shared/global_search/constants';
+import {
+  ICON_GROUP,
+  ICON_SUBGROUP,
+  ICON_PROJECT,
+  SEARCH_SHORTCUTS_MIN_CHARACTERS,
 } from '../constants';
 
 export const searchQuery = (state) => {