Merge branch 'update-input' into 'master'

Apply new GitLab UI for search in "frequent items search" dropdown

See merge request gitlab-org/gitlab!53368

app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue

 <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>

changelogs/unreleased/update-input.yml

+---
+title: Apply new GitLab UI for search in frequent items search
+merge_request: 53368
+author: Yogi (@yo)
+type: other

spec/frontend/frequent_items/components/frequent_items_search_input_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlSearchBoxByType } from '@gitlab/ui';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import searchComponent from '~/frequent_items/components/frequent_items_search_input.vue';
 import { createStore } from '~/frequent_items/store';
@@ -15,6 +16,8 @@ describe('FrequentItemsSearchInputComponent', () => {
       propsData: { namespace },
     });
 
+  const findSearchBoxByType = () => wrapper.find(GlSearchBoxByType);
+
   beforeEach(() => {
     store = createStore({ dropdownType: 'project' });
     jest.spyOn(store, 'dispatch').mockImplementation(() => {});
@@ -32,26 +35,13 @@ describe('FrequentItemsSearchInputComponent', () => {
     vm.$destroy();
   });
 
-  describe('methods', () => {
-    describe('setFocus', () => {
-      it('should set focus to search input', () => {
-        jest.spyOn(vm.$refs.search, 'focus').mockImplementation(() => {});
-
-        vm.setFocus();
-
-        expect(vm.$refs.search.focus).toHaveBeenCalled();
-      });
-    });
-  });
-
   describe('template', () => {
     it('should render component element', () => {
       expect(wrapper.classes()).toContain('search-input-container');
-      expect(wrapper.find('input.form-control').exists()).toBe(true);
-      expect(wrapper.find('.search-icon').exists()).toBe(true);
-      expect(wrapper.find('input.form-control').attributes('placeholder')).toBe(
-        'Search your projects',
-      );
+      expect(findSearchBoxByType().exists()).toBe(true);
+      expect(findSearchBoxByType().attributes()).toMatchObject({
+        placeholder: 'Search your projects',
+      });
     });
   });
 
@@ -62,9 +52,7 @@ describe('FrequentItemsSearchInputComponent', () => {
 
       const value = 'my project';
 
-      const input = wrapper.find('input');
-      input.setValue(value);
-      input.trigger('input');
+      findSearchBoxByType().vm.$emit('input', value);
 
       await wrapper.vm.$nextTick();