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

5 files changed, 33 insertions, 114 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index ba57d6e12ec..6bd45ba3d4e 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -1448,10 +1448,6 @@ pre.light-well {
 }
 
 .project-filters {
-  .row-content-block {
-    border-top: 0;
-  }
-
   .btn svg {
     color: $gl-gray-700;
   }
@@ -1470,53 +1466,39 @@ pre.light-well {
     }
   }
 
-  .filtered-search-wrapper {
-    flex-wrap: nowrap;
-    flex-direction: row;
-  }
-
-  .filtered-search-dropdown {
-    width: auto;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .filtered-search,
-  .filtered-search-nav,
-  .filtered-search-dropdown {
-    display: flex;
-    min-width: auto;
-    margin: 0;
-  }
-
   .filtered-search-dropdown-label {
-    padding: 0 0 0 16px;
-    font-weight: bold;
     min-width: 68px;
+
+    @include media-breakpoint-down(xs) {
+      min-width: 60px;
+    }
   }
 
   .filtered-search {
-    margin: 0 0 0 16px;
     min-width: 30%;
-    width: 100%;
     flex: 1 1 0;
 
     .project-filter-form .project-filter-form-field {
       padding-right: 8px;
     }
-  }
 
-  .filtered-search,
-  .filtered-search-dropdown {
-    .btn-group {
-      width: 100%;
+    @include media-breakpoint-down(lg) {
+      min-width: 15%;
+
+      .project-filter-form-field {
+        min-width: 150px;
+      }
     }
 
-    .qa-reverse-sort {
-      max-width: 38px;
+    @include media-breakpoint-down(md) {
+      min-width: 30%;
     }
   }
 
+  .qa-reverse-sort {
+    max-width: 38px;
+  }
+
   .filtered-search-box {
     border-radius: 3px 0 0 3px;
   }
@@ -1525,41 +1507,11 @@ pre.light-well {
     margin-left: 8px;
   }
 
-  @include media-breakpoint-down(lg) {
-    .filtered-search {
-      min-width: 15%;
-
-      .project-filter-form-field {
-        min-width: 150px;
-      }
-    }
-
-    .extended-filtered-search-box {
-      margin: 0;
-      min-width: 45%;
-    }
-  }
-
   @include media-breakpoint-down(md) {
-    .filtered-search:not(.extended-filtered-search-box) {
-      margin: 0 0 8px 16px;
-      min-width: 30%;
-    }
-
     .extended-filtered-search-box {
-      margin: 0 0 8px;
       min-width: 55%;
     }
 
-    .filtered-search-nav {
-      margin: 0 0 8px;
-    }
-
-
-    .filtered-search-wrapper {
-      flex-wrap: wrap;
-    }
-
     .filtered-search-dropdown {
       width: 50%;
     }
@@ -1579,43 +1531,11 @@ pre.light-well {
       width: 100%;
     }
 
-    .filtered-search-wrapper {
-      display: flex;
-      flex-flow: column nowrap;
-    }
-
     .filtered-search,
     .filtered-search-nav,
     .filtered-search-dropdown {
       flex: 1 1 0;
       width: 100%;
     }
-
-    .filtered-search:not(.extended-filtered-search-box),
-    .filtered-search {
-      margin-left: 0;
-    }
-
-    .filtered-search-box {
-      margin: 0;
-    }
-
-    .filtered-search-nav .nav-block {
-      width: 100%;
-    }
-
-    .filtered-search-dropdown {
-      margin: 0 0 8px;
-
-      &:last-of-type {
-        margin: 0;
-      }
-    }
-
-    .filtered-search-dropdown-label {
-      padding: 0;
-      min-width: 60px;
-    }
   }
 }
-
diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml
index 8f4a517d918..b01e6c4293c 100644
--- a/app/views/dashboard/projects/_nav.html.haml
+++ b/app/views/dashboard/projects/_nav.html.haml
@@ -3,7 +3,7 @@
 - inactive_class = 'btn p-2'
 - active_class = 'btn p-2 active'
 - is_explore_trending = local_assigns.fetch(:is_explore_trending, false)
-.nav-block
+.nav-block{ class: Feature.enabled?(:project_list_filter_bar) ? "w-100" : "" }
   - if !Feature.enabled?(:project_list_filter_bar)
     %ul.nav-links.mobile-separator.nav.nav-tabs
       = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do
@@ -11,8 +11,7 @@
       = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
         = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
   - else
-    -# %ul.btn-group.button-filter-group.d-flex.m-0.p-0
-    %div.btn-group.button-filter-group.d-flex.m-0.p-0
+    .btn-group.button-filter-group.d-flex.m-0.p-0
       - if is_explore
         = link_to s_('DashboardProjects|Trending'), trending_explore_projects_path, class: is_explore_trending ? active_class : inactive_class
         = link_to s_('DashboardProjects|All'), explore_projects_path, class: is_explore_trending ? inactive_class : active_class
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