Merge branch '56992-add-filtering-to-project-dashboard-fe' into 'master'

Resolve "Add filtering to project dashboard [FE]"

Closes #56992

See merge request gitlab-org/gitlab-ce!25231

5 files changed, 85 insertions, 16 deletions

diff --git a/app/views/shared/groups/_dropdown.html.haml b/app/views/shared/groups/_dropdown.html.haml
index 1ae6d1f5ee3..f4915440cb2 100644
--- a/app/views/shared/groups/_dropdown.html.haml
+++ b/app/views/shared/groups/_dropdown.html.haml
@@ -24,10 +24,10 @@
       %li.divider
       %li.js-filter-archived-projects
         = link_to filter_groups_path(archived: nil), class: ("is-active" unless params[:archived].present?) do
-          Hide archived projects
+          = _("Hide archived projects")
       %li.js-filter-archived-projects
         = link_to filter_groups_path(archived: true), class: ("is-active" if Gitlab::Utils.to_boolean(params[:archived])) do
-          Show archived projects
+          = _("Show archived projects")
       %li.js-filter-archived-projects
         = link_to filter_groups_path(archived: 'only'), class: ("is-active" if params[:archived] == 'only') do
-          Show archived projects only
+          = _("Show archived projects only")
diff --git a/app/views/shared/projects/_dropdown.html.haml b/app/views/shared/projects/_dropdown.html.haml
index 98b258d9275..88ac03bf9e3 100644
--- a/app/views/shared/projects/_dropdown.html.haml
+++ b/app/views/shared/projects/_dropdown.html.haml
@@ -1,10 +1,9 @@
 - @sort ||= sort_value_latest_activity
 .dropdown.js-project-filter-dropdown-wrap
-  - toggle_text = projects_sort_options_hash[@sort]
-  = dropdown_toggle(toggle_text, { toggle: 'dropdown', display: 'static' }, { id: 'sort-projects-dropdown' })
+  = dropdown_toggle(projects_sort_options_hash[@sort], { toggle: 'dropdown', display: 'static' }, { id: 'sort-projects-dropdown' })
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
-      Sort by
+      = _("Sort by")
     - projects_sort_options_hash.each do |value, title|
       %li
         = link_to filter_projects_path(sort: value), class: ("is-active" if @sort == value) do
@@ -13,29 +12,29 @@
     %li.divider
     %li
       = link_to filter_projects_path(archived: nil), class: ("is-active" unless params[:archived].present?) do
-        Hide archived projects
+        = _("Hide archived projects")
     %li
       = link_to filter_projects_path(archived: true), class: ("is-active" if Gitlab::Utils.to_boolean(params[:archived])) do
-        Show archived projects
+        = _("Show archived projects")
     %li
       = link_to filter_projects_path(archived: 'only'), class: ("is-active" if params[:archived] == 'only') do
-        Show archived projects only
+        = _("Show archived projects only")
     - if current_user
       %li.divider
       %li
         = link_to filter_projects_path(personal: nil), class: ("is-active" unless params[:personal].present?) do
-          Owned by anyone
+          = _("Owned by anyone")
       %li
         = link_to filter_projects_path(personal: true), class: ("is-active" if params[:personal].present?) do
-          Owned by me
+          = _("Owned by me")
       - if @group && @group.shared_projects.present?
         %li.divider
         %li
           = link_to filter_projects_path(shared: nil), class: ("is-active" unless params[:shared].present?) do
-            All projects
+            = _("All projects")
         %li
           = link_to filter_projects_path(shared: 0), class: ("is-active" if params[:shared] == '0') do
-            Hide shared projects
+            = _("Hide shared projects")
         %li
           = link_to filter_projects_path(shared: 1), class: ("is-active" if params[:shared] == '1') do
-            Hide group projects
+            = _("Hide group projects")
diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml
new file mode 100644
index 00000000000..c1f2eaba284
--- /dev/null
+++ b/app/views/shared/projects/_search_bar.html.haml
@@ -0,0 +1,28 @@
+- @sort ||= sort_value_latest_activity
+- project_tab_filter = local_assigns.fetch(:project_tab_filter, "")
+- flex_grow_and_shrink_xs = 'd-flex flex-xs-grow-1 flex-xs-shrink-1 flex-grow-0 flex-shrink-0'
+
+.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 project_tab_filter == :starred
+      .filtered-search-nav.mb-2.mb-lg-0{ class: flex_grow_and_shrink_xs }
+        = render 'dashboard/projects/nav', project_tab_filter: project_tab_filter
+    .filtered-search.d-flex.flex-grow-1.flex-shrink-1.w-100.mb-2.mb-lg-0.ml-0{ class: project_tab_filter == :starred ? "extended-filtered-search-box mb-2 mb-lg-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...")
+        %button.btn.btn-secondary{ type: 'submit', form: 'project-filter-form' }
+          = sprite_icon('search', size: 16, css_class: 'search-icon ')
+    .filtered-search-dropdown.flex-row.align-items-center.mb-2.m-sm-0#filtered-search-visibility-dropdown{ class: flex_grow_and_shrink_xs }
+      .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold
+        %span
+          = _("Visibility")
+      = render 'explore/projects/filter', has_label: true
+    .filtered-search-dropdown.flex-row.align-items-center.m-sm-0#filtered-search-sorting-dropdown{ class: flex_grow_and_shrink_xs }
+      .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 3b5c13ed93a..7c7c0a363ac 100644
--- a/app/views/shared/projects/_search_form.html.haml
+++ b/app/views/shared/projects/_search_form.html.haml
@@ -1,7 +1,10 @@
+- 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|
   = 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 #{form_field_classes}",
     spellcheck: false,
     id: 'project-filter-form-field',
     tabindex: "2",
diff --git a/app/views/shared/projects/_sort_dropdown.html.haml b/app/views/shared/projects/_sort_dropdown.html.haml
new file mode 100644
index 00000000000..f5f940db189
--- /dev/null
+++ b/app/views/shared/projects/_sort_dropdown.html.haml
@@ -0,0 +1,39 @@
+- @sort ||= sort_value_latest_activity
+- toggle_text = projects_sort_option_titles[@sort]
+
+.btn-group.w-100{ role: "group" }
+  .btn-group.w-100.dropdown.js-project-filter-dropdown-wrap{ role: "group" }
+    %button#sort-projects-dropdown.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
+      = toggle_text
+      = icon('chevron-down')
+    %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
+      %li.dropdown-header
+        = _("Sort by")
+      - projects_sort_options_hash.each do |value, title|
+        %li
+          = link_to title, filter_projects_path(sort: value), class: ("is-active" if toggle_text == title)
+
+      %li.divider
+      %li
+        = link_to filter_projects_path(archived: nil), class: ("is-active" unless params[:archived].present?) do
+          = _("Hide archived projects")
+      %li
+        = link_to filter_projects_path(archived: true), class: ("is-active" if Gitlab::Utils.to_boolean(params[:archived])) do
+          = _("Show archived projects")
+      %li
+        = link_to filter_projects_path(archived: 'only'), class: ("is-active" if params[:archived] == 'only') do
+          = _("Show archived projects only")
+
+      - if current_user && @group && @group.shared_projects.present?
+        %li.divider
+        %li
+          = link_to filter_projects_path(shared: nil), class: ("is-active" unless params[:shared].present?) do
+            = _("All projects")
+        %li
+          = link_to filter_projects_path(shared: 0), class: ("is-active" if params[:shared] == '0') do
+            = _("Hide shared projects")
+        %li
+          = link_to filter_projects_path(shared: 1), class: ("is-active" if params[:shared] == '1') do
+            = _("Hide group projects")
+
+  = project_sort_direction_button(@sort)