Add latest changes from gitlab-org/gitlab@master

1 files changed, 3 insertions, 10 deletions

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 b4a57a0a619..f2c8fb1036d 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,7 +1,7 @@
 <script>
 import { debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { GlIcon } from '@gitlab/ui';
+import { GlSearchBoxByType } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import frequentItemsMixin from './frequent_items_mixin';
 
@@ -9,7 +9,7 @@ const trackingMixin = Tracking.mixin();
 
 export default {
   components: {
-    GlIcon,
+    GlSearchBoxByType,
   },
   mixins: [frequentItemsMixin, trackingMixin],
   data() {
@@ -33,22 +33,15 @@ export default {
   },
   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>