Issue 349398 - Update search field in Global Search

Changelog: changed

app/assets/javascripts/search/topbar/components/app.vue

 <script>
-import { GlForm, GlSearchBoxByType, GlButton } from '@gitlab/ui';
+import { GlSearchBoxByClick } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
+import { s__ } from '~/locale';
 import GroupFilter from './group_filter.vue';
 import ProjectFilter from './project_filter.vue';
 
 export default {
   name: 'GlobalSearchTopbar',
+  i18n: {
+    searchPlaceholder: s__(`GlobalSearch|Search for projects, issues, etc.`),
+    searchLabel: s__(`GlobalSearch|What are you searching for?`),
+  },
   components: {
-    GlForm,
-    GlSearchBoxByType,
+    GlSearchBoxByClick,
     GroupFilter,
     ProjectFilter,
-    GlButton,
   },
   props: {
     groupInitialData: {
@@ -49,28 +52,24 @@ export default {
 </script>
 
 <template>
-  <gl-form class="search-page-form" @submit.prevent="applyQuery">
-    <section class="gl-lg-display-flex gl-align-items-flex-end">
-      <div class="gl-flex-grow-1 gl-mb-4 gl-lg-mb-0 gl-lg-mr-2">
-        <label>{{ __('What are you searching for?') }}</label>
-        <gl-search-box-by-type
-          id="dashboard_search"
-          v-model="search"
-          name="search"
-          :placeholder="__(`Search for projects, issues, etc.`)"
-        />
-      </div>
-      <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-2">
-        <label class="gl-display-block">{{ __('Group') }}</label>
-        <group-filter :initial-data="groupInitialData" />
-      </div>
-      <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-2">
-        <label class="gl-display-block">{{ __('Project') }}</label>
-        <project-filter :initial-data="projectInitialData" />
-      </div>
-      <gl-button class="btn-search gl-lg-ml-2" category="primary" variant="confirm" type="submit"
-        >{{ __('Search') }}
-      </gl-button>
-    </section>
-  </gl-form>
+  <section class="search-page-form gl-lg-display-flex gl-align-items-flex-end">
+    <div class="gl-flex-grow-1 gl-mb-4 gl-lg-mb-0 gl-lg-mr-2">
+      <label>{{ $options.i18n.searchLabel }}</label>
+      <gl-search-box-by-click
+        id="dashboard_search"
+        v-model="search"
+        name="search"
+        :placeholder="$options.i18n.searchPlaceholder"
+        @submit="applyQuery"
+      />
+    </div>
+    <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-2">
+      <label class="gl-display-block">{{ __('Group') }}</label>
+      <group-filter :initial-data="groupInitialData" />
+    </div>
+    <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-2">
+      <label class="gl-display-block">{{ __('Project') }}</label>
+      <project-filter :initial-data="projectInitialData" />
+    </div>
+  </section>
 </template>

ee/spec/features/search/user_searches_for_epics_spec.rb

@@ -10,7 +10,7 @@ RSpec.describe 'User searches for epics', :js do
 
   def search_for_epic(search)
     fill_in('dashboard_search', with: search)
-    find('.btn-search').click
+    find('.gl-search-box-by-click-search-button').click
     select_search_scope('Epics')
   end
 

locale/gitlab.pot

@@ -16825,6 +16825,9 @@ msgstr ""
 msgid "GlobalSearch|Search GitLab"
 msgstr ""
 
+msgid "GlobalSearch|Search for projects, issues, etc."
+msgstr ""
+
 msgid "GlobalSearch|Search results are loading"
 msgstr ""
 
@@ -16834,6 +16837,9 @@ msgstr ""
 msgid "GlobalSearch|Type for new suggestions to appear below."
 msgstr ""
 
+msgid "GlobalSearch|What are you searching for?"
+msgstr ""
+
 msgid "GlobalSearch|in all GitLab"
 msgstr ""
 
@@ -41389,9 +41395,6 @@ msgstr ""
 msgid "What are project audit events?"
 msgstr ""
 
-msgid "What are you searching for?"
-msgstr ""
-
 msgid "What does this command do?"
 msgstr ""
 

spec/features/search/user_searches_for_code_spec.rb

@@ -42,7 +42,7 @@ RSpec.describe 'User searches for code' do
 
       it 'finds code and links to blob' do
         fill_in('dashboard_search', with: 'rspec')
-        find('.btn-search').click
+        find('.gl-search-box-by-click-search-button').click
 
         expect(page).to have_selector('.results', text: 'Update capybara, rspec-rails, poltergeist to recent versions')
 
@@ -52,7 +52,7 @@ RSpec.describe 'User searches for code' do
 
       it 'finds code and links to blame' do
         fill_in('dashboard_search', with: 'rspec')
-        find('.btn-search').click
+        find('.gl-search-box-by-click-search-button').click
 
         expect(page).to have_selector('.results', text: 'Update capybara, rspec-rails, poltergeist to recent versions')
 
@@ -65,7 +65,7 @@ RSpec.describe 'User searches for code' do
         search = 'for naming files'
 
         fill_in('dashboard_search', with: search)
-        find('.btn-search').click
+        find('.gl-search-box-by-click-search-button').click
 
         expect(page).to have_selector('.results', text: expected_result)
 
@@ -94,7 +94,7 @@ RSpec.describe 'User searches for code' do
         expect(find('.js-project-refs-dropdown')).to have_text(ref_name)
       end
       it 'persists branch name across search' do
-        find('.btn-search').click
+        find('.gl-search-box-by-click-search-button').click
         expect(find('.js-project-refs-dropdown')).to have_text(ref_name)
       end
 

spec/features/search/user_searches_for_issues_spec.rb

@@ -10,7 +10,7 @@ RSpec.describe 'User searches for issues', :js do
 
   def search_for_issue(search)
     fill_in('dashboard_search', with: search)
-    find('.btn-search').click
+    find('.gl-search-box-by-click-search-button').click
     select_search_scope('Issues')
   end
 

spec/features/search/user_searches_for_merge_requests_spec.rb

@@ -10,7 +10,7 @@ RSpec.describe 'User searches for merge requests', :js do
 
   def search_for_mr(search)
     fill_in('dashboard_search', with: search)
-    find('.btn-search').click
+    find('.gl-search-box-by-click-search-button').click
     select_search_scope('Merge requests')
   end
 

spec/features/search/user_searches_for_milestones_spec.rb

@@ -20,7 +20,7 @@ RSpec.describe 'User searches for milestones', :js do
 
   it 'finds a milestone' do
     fill_in('dashboard_search', with: milestone1.title)
-    find('.btn-search').click
+    find('.gl-search-box-by-click-search-button').click
     select_search_scope('Milestones')
 
     page.within('.results') do
@@ -40,7 +40,7 @@ RSpec.describe 'User searches for milestones', :js do
       end
 
       fill_in('dashboard_search', with: milestone1.title)
-      find('.btn-search').click
+      find('.gl-search-box-by-click-search-button').click
       select_search_scope('Milestones')
 
       page.within('.results') do

spec/features/search/user_searches_for_wiki_pages_spec.rb

@@ -28,7 +28,7 @@ RSpec.describe 'User searches for wiki pages', :js do
       end
 
       fill_in('dashboard_search', with: search_term)
-      find('.btn-search').click
+      find('.gl-search-box-by-click-search-button').click
       select_search_scope('Wiki')
 
       page.within('.results') do

spec/frontend/search/topbar/components/app_spec.js

-import { GlForm, GlSearchBoxByType, GlButton } from '@gitlab/ui';
+import { GlSearchBoxByClick } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -36,40 +36,19 @@ describe('GlobalSearchTopbar', () => {
     wrapper.destroy();
   });
 
-  const findTopbarForm = () => wrapper.find(GlForm);
-  const findGlSearchBox = () => wrapper.find(GlSearchBoxByType);
+  const findGlSearchBox = () => wrapper.find(GlSearchBoxByClick);
   const findGroupFilter = () => wrapper.find(GroupFilter);
   const findProjectFilter = () => wrapper.find(ProjectFilter);
-  const findSearchButton = () => wrapper.find(GlButton);
 
   describe('template', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('renders Topbar Form always', () => {
-      expect(findTopbarForm().exists()).toBe(true);
-    });
-
     describe('Search box', () => {
       it('renders always', () => {
         expect(findGlSearchBox().exists()).toBe(true);
       });
-
-      describe('onSearch', () => {
-        const testSearch = 'test search';
-
-        beforeEach(() => {
-          findGlSearchBox().vm.$emit('input', testSearch);
-        });
-
-        it('calls setQuery when input event is fired from GlSearchBoxByType', () => {
-          expect(actionSpies.setQuery).toHaveBeenCalledWith(expect.any(Object), {
-            key: 'search',
-            value: testSearch,
-          });
-        });
-      });
     });
 
     describe.each`
@@ -92,10 +71,6 @@ describe('GlobalSearchTopbar', () => {
         expect(findProjectFilter().exists()).toBe(showFilters);
       });
     });
-
-    it('renders SearchButton always', () => {
-      expect(findSearchButton().exists()).toBe(true);
-    });
   });
 
   describe('actions', () => {
@@ -103,8 +78,8 @@ describe('GlobalSearchTopbar', () => {
       createComponent();
     });
 
-    it('clicking SearchButton calls applyQuery', () => {
-      findTopbarForm().vm.$emit('submit', { preventDefault: () => {} });
+    it('clicking search button inside search box calls applyQuery', () => {
+      findGlSearchBox().vm.$emit('submit', { preventDefault: () => {} });
 
       expect(actionSpies.applyQuery).toHaveBeenCalled();
     });