Use history icon on recent search filter tab only on mobile

The icon was replaced with the text to avoid ambiguity of the icon at
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/18468, but this
partially reverts the original implementation with the icon only for
mobile/tablet screens to enlarge the input area of search in the
filter bar.

This MR does not include improving the width and/or the misalignment
of the search bar.

The original implementation of the icon only:
https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/10324Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

app/assets/stylesheets/framework/filters.scss

@@ -307,23 +307,6 @@
     color: $gl-text-color;
     border-color: $border-color;
   }
-
-  svg {
-    height: 14px;
-    width: 14px;
-    vertical-align: middle;
-    margin-bottom: 4px;
-  }
-
-  .dropdown-toggle-text {
-    display: inline-block;
-    color: inherit;
-
-    .fa {
-      vertical-align: middle;
-      color: inherit;
-    }
-  }
 }
 
 .filtered-search-history-dropdown {

app/views/shared/issuable/_search_bar.html.haml

@@ -20,7 +20,8 @@
         .issues-other-filters.filtered-search-wrapper.d-flex.flex-column.flex-md-row
           .filtered-search-box
             - if type != :boards_modal && type != :boards
-              = dropdown_tag(_('Recent searches'),
+              - text = tag.span(sprite_icon('history'), class: "d-md-none") + tag.span(_('Recent searches'), class: "d-none d-md-inline")
+              = dropdown_tag(text,
                 options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
                 toggle_class: "btn filtered-search-history-dropdown-toggle-button",
                 dropdown_class: "filtered-search-history-dropdown",

changelogs/unreleased/237337-revisit-history-icon-on-recent-search.yml

+---
+title: Use history icon on recent search filter tab only on mobile
+merge_request: 39557
+author: Takuya Noguchi
+type: fixed

spec/features/issues/filtered_search/recent_searches_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'Recent searches', :js do
   include FilteredSearchHelpers
+  include MobileHelpers
 
   let(:project_1) { create(:project, :public) }
   let(:project_2) { create(:project, :public) }
@@ -104,4 +105,24 @@ RSpec.describe 'Recent searches', :js do
 
     expect(find('.flash-alert')).to have_text('An error occurred while parsing recent searches')
   end
+
+  context 'on tablet/mobile screen' do
+    it 'shows only the history icon in the dropdown' do
+      resize_screen_sm
+      visit project_issues_path(project_1)
+
+      expect(find('.filtered-search-history-dropdown-wrapper')).to have_selector('svg', visible: true)
+      expect(find('.filtered-search-history-dropdown-wrapper')).to have_selector('span', text: 'Recent searches', visible: false)
+    end
+  end
+
+  context 'on PC screen' do
+    it 'shows only the Recent searches text in the dropdown' do
+      restore_window_size
+      visit project_issues_path(project_1)
+
+      expect(find('.filtered-search-history-dropdown-wrapper')).to have_selector('svg', visible: false)
+      expect(find('.filtered-search-history-dropdown-wrapper')).to have_selector('span', text: 'Recent searches', visible: true)
+    end
+  end
 end