Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

7 files changed, 13 insertions, 27 deletions

diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index 68cc8645813..69f89aa3857 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -1,13 +1,13 @@
 <script>
-import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import AccessorUtilities from '~/lib/utils/accessor';
-import eventHub from '../event_hub';
 import { FREQUENT_ITEMS, STORAGE_KEY } from '../constants';
+import eventHub from '../event_hub';
 import { isMobile, updateExistingFrequentItem, sanitizeItem } from '../utils';
-import FrequentItemsSearchInput from './frequent_items_search_input.vue';
 import FrequentItemsList from './frequent_items_list.vue';
 import frequentItemsMixin from './frequent_items_mixin';
+import FrequentItemsSearchInput from './frequent_items_search_input.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
index 9d898d1a1a1..6feeb5f03ad 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
@@ -1,7 +1,7 @@
 <script>
+import { sanitizeItem } from '../utils';
 import FrequentItemsListItem from './frequent_items_list_item.vue';
 import frequentItemsMixin from './frequent_items_mixin';
-import { sanitizeItem } from '../utils';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
index 3260d768fd9..6f17e6a5282 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -1,10 +1,10 @@
 <script>
 /* eslint-disable vue/require-default-prop, vue/no-v-html */
 import { mapState } from 'vuex';
-import Identicon from '~/vue_shared/components/identicon.vue';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
 import Tracking from '~/tracking';
+import Identicon from '~/vue_shared/components/identicon.vue';
 
 const trackingMixin = Tracking.mixin();
 
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
index 8042e8c7bc9..b0972246e70 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
@@ -1,16 +1,15 @@
 <script>
+import { GlSearchBoxByType } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { GlIcon } from '@gitlab/ui';
-import eventHub from '../event_hub';
-import frequentItemsMixin from './frequent_items_mixin';
 import Tracking from '~/tracking';
+import frequentItemsMixin from './frequent_items_mixin';
 
 const trackingMixin = Tracking.mixin();
 
 export default {
   components: {
-    GlIcon,
+    GlSearchBoxByType,
   },
   mixins: [frequentItemsMixin, trackingMixin],
   data() {
@@ -32,30 +31,17 @@ export default {
       this.setSearchQuery(this.searchQuery);
     }, 500),
   },
-  mounted() {
-    eventHub.$on(`${this.namespace}-dropdownOpen`, this.setFocus);
-  },
-  beforeDestroy() {
-    eventHub.$off(`${this.namespace}-dropdownOpen`, this.setFocus);
-  },
   methods: {
     ...mapActions(['setSearchQuery']),
-    setFocus() {
-      this.$refs.search.focus();
-    },
   },
 };
 </script>
 
 <template>
   <div class="search-input-container d-none d-sm-block">
-    <input
-      ref="search"
+    <gl-search-box-by-type
       v-model="searchQuery"
       :placeholder="translations.searchInputPlaceholder"
-      type="search"
-      class="form-control"
     />
-    <gl-icon v-if="!searchQuery" name="search" class="search-icon" />
   </div>
 </template>
diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js
index cef8be37a40..eb8a404e8a5 100644
--- a/app/assets/javascripts/frequent_items/index.js
+++ b/app/assets/javascripts/frequent_items/index.js
@@ -1,8 +1,8 @@
 import $ from 'jquery';
 import Vue from 'vue';
+import { createStore } from '~/frequent_items/store';
 import Translate from '~/vue_shared/translate';
 import eventHub from './event_hub';
-import { createStore } from '~/frequent_items/store';
 
 Vue.use(Translate);
 
diff --git a/app/assets/javascripts/frequent_items/store/actions.js b/app/assets/javascripts/frequent_items/store/actions.js
index f4156487625..90b454d1b42 100644
--- a/app/assets/javascripts/frequent_items/store/actions.js
+++ b/app/assets/javascripts/frequent_items/store/actions.js
@@ -1,7 +1,7 @@
 import AccessorUtilities from '~/lib/utils/accessor';
-import * as types from './mutation_types';
-import { getTopFrequentItems } from '../utils';
 import { getGroups, getProjects } from '~/rest_api';
+import { getTopFrequentItems } from '../utils';
+import * as types from './mutation_types';
 
 export const setNamespace = ({ commit }, namespace) => {
   commit(types.SET_NAMESPACE, namespace);
diff --git a/app/assets/javascripts/frequent_items/utils.js b/app/assets/javascripts/frequent_items/utils.js
index 63fe0ef20b0..88519d934cb 100644
--- a/app/assets/javascripts/frequent_items/utils.js
+++ b/app/assets/javascripts/frequent_items/utils.js
@@ -1,5 +1,5 @@
-import { take } from 'lodash';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
+import { take } from 'lodash';
 import { sanitize } from '~/lib/dompurify';
 import { FREQUENT_ITEMS, HOUR_IN_MS } from './constants';