Added filter bar to project page

Added project_list_filter_bar feature flag

app/assets/stylesheets/pages/projects.scss

@@ -1446,3 +1446,25 @@ pre.light-well {
     }
   }
 }
+
+.project-filters {
+  .button-filter-group {
+    .btn {
+      width: 96px;
+    }
+
+    a {
+      color: $black;
+    }
+
+    .active {
+      background: $btn-active-gray;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .dropdown-menu-toggle {
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file

app/views/dashboard/_projects_head.html.haml

@@ -23,7 +23,10 @@
     = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
       = link_to explore_root_path, data: {placement: 'right'} do
         Explore projects
-
-  .nav-controls
-    = render 'shared/projects/search_form'
-    = render 'shared/projects/dropdown'
+  - unless Feature.enabled?(:project_list_filter_bar)
+    .nav-controls
+      = render 'shared/projects/search_form'
+      = render 'shared/projects/dropdown'
+- if Feature.enabled?(:project_list_filter_bar)
+  .project-filters
+    = render 'shared/projects/search_bar'

app/views/dashboard/projects/_nav.html.haml

 .nav-block
-  %ul.nav-links.mobile-separator.nav.nav-tabs
-    = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do
-      = link_to s_('DashboardProjects|All'), dashboard_projects_path
-    = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
-      = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
+  - 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
+        = link_to s_('DashboardProjects|All'), dashboard_projects_path
+      = 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
+      = nav_link(html_options: { class: params[:personal].present? ? "btn p-2" : "btn p-2 active" }) do
+        = link_to s_('DashboardProjects|All'), dashboard_projects_path
+      = nav_link(html_options: { class: params[:personal].present? ? "btn p-2 active" : "btn p-2" }) do
+        = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)

app/views/dashboard/projects/index.html.haml

@@ -13,7 +13,8 @@
   = render "projects/last_push"
   - if show_projects?(@projects, params)
     = render 'dashboard/projects_head'
-    = render 'nav'
+    - unless Feature.enabled?(:project_list_filter_bar)
+      = render 'nav'
     = render 'projects'
   - else
     = render "zero_authorized_projects"

app/views/explore/projects/_filter.html.haml

+- has_label = local_assigns[:has_label] ? local_assigns[:has_label] : false
 - if current_user
   .dropdown
     %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
-      = icon('globe', class: 'mt-1')
-      %span.light.ml-3= _("Visibility:")
+      - if !has_label
+        = icon('globe', class: 'mt-1')
+        %span.light.ml-3= _("Visibility:")
       - if params[:visibility_level].present?
         = visibility_level_label(params[:visibility_level].to_i)
       - else

app/views/explore/projects/_nav.html.haml

@@ -11,7 +11,10 @@
         = _('All')
 
   .nav-controls
+    -# TODO: filters are currently only shown when logged out, I assume we want to show them all the time?
     - unless current_user
       = render 'shared/projects/search_form'
       = render 'shared/projects/dropdown'
-    = render 'filter'
+    - unless Feature.enabled?(:project_list_filter_bar)
+      = render 'filter'
+

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

+- @sort ||= sort_value_latest_activity
+-# TODO: simplify multiple utility classes into single class?
+.filtered-search-block.row-content-block
+  .filtered-search-wrapper.d-flex.flex-column.flex-md-row.mt-2.mt-md-0
+    .d-inline.d-md-flex.mb-2.mb-md-0
+      = render 'dashboard/projects/nav'
+    .filtered-search-box.mb-2.mb-md-0.ml-md-2
+      .filtered-search-box-input-container.pl-2
+        = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...")
+      -# TODO: double check if theres a point to this button, or is it just aesthetic for now
+      -# TODO: fix right hand border
+      %button.input-group-append.btn.btn-secondary{ type: 'submit' }
+        = sprite_icon('search', size: 18, css_class: 'search-icon ')
+    -# TODO: need to double check visibility is applying correctly
+    .d-inline.d-md-flex.mb-2.mb-md-0.ml-md-2.flex-row
+      .d-flex.align-items-center.px-2.font-weight-bold
+        %span
+          = _("Visibility")
+      .dropdown.js-project-filter-dropdown-wrap.inline-md
+        = render 'explore/projects/filter', has_label: true
+    .d-inline.d-md-flex.mb-2.mb-md-0.ml-md-2.flex-row
+      .d-flex.align-items-center.px-2.font-weight-bold
+        %span
+          = _("Sort by")
+      = render 'shared/projects/dropdown'
+

app/views/shared/projects/_search_form.html.haml

+- form_field_classes = local_assigns[:admin_view] ? 'input-short' : ''
+- 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|
   = search_field_tag :name, params[:name],
-    placeholder: 'Filter by name...',
-    class: 'project-filter-form-field form-control input-short js-projects-list-filter',
+    placeholder: placeholder,
+    class: "project-filter-form-field form-control js-projects-list-filter #{form_field_classes}",
     spellcheck: false,
     id: 'project-filter-form-field',
     tabindex: "2",