Update project list specs

Add tests to ensure search only executes with a button click or enter,
sort by Name, Last updated, Created date and Stars and tests for
Visibility filter

3 files changed, 15 insertions, 15 deletions

diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml
index 8c5dd25bee8..a70e60d7948 100644
--- a/app/views/shared/projects/_search_bar.html.haml
+++ b/app/views/shared/projects/_search_bar.html.haml
@@ -2,28 +2,28 @@
 - is_explore = local_assigns.fetch(:is_explore, false)
 - is_explore_trending = local_assigns.fetch(:is_explore_trending, false)
 - without_tabs = local_assigns.fetch(:without_tabs, false)
-.filtered-search-block.row-content-block
-  .filtered-search-wrapper.d-flex
+.filtered-search-block.row-content-block.bt-0
+  .filtered-search-wrapper.d-flex.flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap
     - unless without_tabs
-      .filtered-search-nav
+      .filtered-search-nav.d-flex.mb-2.mb-lg-0
         = render 'dashboard/projects/nav', is_explore: is_explore, is_explore_trending: is_explore_trending
-    .filtered-search{ class: without_tabs ? "extended-filtered-search-box" : "" }
-      .btn-group{ role: "group" }
-        .btn-group{ role: "group" }
-          .filtered-search-box
+    .filtered-search.d-flex.w-100.mb-2.mb-lg-0{ class: without_tabs ? "extended-filtered-search-box ml-0 mb-2 mb-lg-0" : "ml-0 ml-sm-3" }
+      .btn-group.w-100{ role: "group" }
+        .btn-group.w-100{ role: "group" }
+          .filtered-search-box.m-0
             .filtered-search-box-input-container.pl-2
               = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...")
         -# TODO: since we are no longer triggering search when we type
-        -#       we might be able to safely remove app/assets/javascripts/projects_list.js
+        -#       we might be able to remove app/assets/javascripts/projects_list.js
         %button.btn.btn-secondary{ type: 'submit', form: 'project-filter-form' }
           = sprite_icon('search', size: 16, css_class: 'search-icon ')
-    .filtered-search-dropdown
-      .filtered-search-dropdown-label
+    .filtered-search-dropdown.d-flex.flex-row.align-items-center.mb-2.m-sm-0#filtered-search-visibility-dropdown
+      .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold
         %span
           = _("Visibility")
       = render 'explore/projects/filter', has_label: true
-    .filtered-search-dropdown
-      .filtered-search-dropdown-label
+    .filtered-search-dropdown.d-flex.flex-row.align-items-center.m-sm-0#filtered-search-sorting-dropdown
+      .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold
         %span
           = _("Sort by")
       = render 'shared/projects/sort_dropdown'
diff --git a/app/views/shared/projects/_search_form.html.haml b/app/views/shared/projects/_search_form.html.haml
index b85f51f37c5..7c7c0a363ac 100644
--- a/app/views/shared/projects/_search_form.html.haml
+++ b/app/views/shared/projects/_search_form.html.haml
@@ -1,4 +1,4 @@
-- form_field_classes = local_assigns[:admin_view] ? 'input-short' : ''
+- form_field_classes = local_assigns[:admin_view] || !Feature.enabled?(:project_list_filter_bar) ? 'input-short js-projects-list-filter' : ''
 - placeholder = local_assigns[:search_form_placeholder] ? search_form_placeholder : 'Filter by name...'
 
 = form_tag filter_projects_path, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
diff --git a/app/views/shared/projects/_sort_dropdown.html.haml b/app/views/shared/projects/_sort_dropdown.html.haml
index 504ca772815..c806d0851db 100644
--- a/app/views/shared/projects/_sort_dropdown.html.haml
+++ b/app/views/shared/projects/_sort_dropdown.html.haml
@@ -1,6 +1,6 @@
 - @sort ||= sort_value_latest_activity
-.btn-group{ role: "group" }
-  .btn-group.dropdown.js-project-filter-dropdown-wrap{ role: "group" }
+.btn-group.w-100{ role: "group" }
+  .btn-group.w-100.dropdown.js-project-filter-dropdown-wrap{ role: "group" }
     - toggle_text = projects_sort_option_titles[@sort]
     %button.dropdown-menu-toggle{ id: 'sort-projects-dropdown', type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
       = toggle_text