Ensure we dont apply changes to admin/projects

The changes introduced for the project filter bar should
not apply to the admin projects screen.

Remove "Owned by me", "Owned by anyone" options

Update the dropdown option Last created -> Created date.
Introduces fixes for spacing and minor styling across breakpoints.

7 files changed, 121 insertions, 70 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d6422a4d425..ba57d6e12ec 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -1470,10 +1470,6 @@ pre.light-well {
     }
   }
 
-  .filter-with-icon {
-    border-radius: 3px 0 0 3px;
-  }
-
   .filtered-search-wrapper {
     flex-wrap: nowrap;
     flex-direction: row;
@@ -1494,9 +1490,9 @@ pre.light-well {
   }
 
   .filtered-search-dropdown-label {
-    padding: 0 8px 0 16px;
+    padding: 0 0 0 16px;
     font-weight: bold;
-    min-width: 76px;
+    min-width: 68px;
   }
 
   .filtered-search {
@@ -1525,6 +1521,10 @@ pre.light-well {
     border-radius: 3px 0 0 3px;
   }
 
+  .dropdown-menu-toggle {
+    margin-left: 8px;
+  }
+
   @include media-breakpoint-down(lg) {
     .filtered-search {
       min-width: 15%;
@@ -1534,18 +1534,23 @@ pre.light-well {
       }
     }
 
-    .extended-filtered-search.filtered-search {
-      margin-left: 0;
-      min-width: 65%;
+    .extended-filtered-search-box {
+      margin: 0;
+      min-width: 45%;
     }
   }
 
   @include media-breakpoint-down(md) {
-    .filtered-search {
+    .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;
     }
@@ -1586,6 +1591,7 @@ pre.light-well {
       width: 100%;
     }
 
+    .filtered-search:not(.extended-filtered-search-box),
     .filtered-search {
       margin-left: 0;
     }
@@ -1600,14 +1606,16 @@ pre.light-well {
 
     .filtered-search-dropdown {
       margin: 0 0 8px;
+
+      &:last-of-type {
+        margin: 0;
+      }
     }
 
     .filtered-search-dropdown-label {
-      padding-left: 0;
+      padding: 0;
+      min-width: 60px;
     }
-
   }
-
-  
 }
 
diff --git a/app/helpers/sorting_helper.rb b/app/helpers/sorting_helper.rb
index bfba12972db..dfb741269eb 100644
--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -29,30 +29,40 @@ module SortingHelper
     }
   end
 
-  # TODO: stars_asc doesnt seem to work
   def projects_sort_options_hash
+    is_admin = current_controller?('admin/projects')
+
     options = {
       sort_value_latest_activity  => sort_title_latest_activity,
-      sort_value_recently_created => sort_title_recently_created,
       sort_value_name             => sort_title_name,
-      sort_value_most_stars       => sort_title_stars
+      sort_value_oldest_activity  => sort_title_oldest_activity,
+      sort_value_oldest_created   => sort_title_oldest_created,
+      sort_value_recently_created => sort_title_recently_created,
+      sort_value_most_stars       => sort_title_most_stars
     }
 
-    if current_controller?('admin/projects')
+    if is_admin
       options[sort_value_largest_repo] = sort_title_largest_repo
     end
 
-    options
+    search_bar_options = {
+      sort_value_latest_activity  => sort_title_latest_activity,
+      sort_value_recently_created => sort_title_created_date,
+      sort_value_name             => sort_title_name,
+      sort_value_most_stars       => sort_title_stars
+    }
+
+    Feature.enabled?(:project_list_filter_bar) && !is_admin ? search_bar_options : options
   end
 
   def projects_sort_option_titles
     {
       sort_value_latest_activity  => sort_title_latest_activity,
-      sort_value_recently_created => sort_title_recently_created,
+      sort_value_recently_created => sort_title_created_date,
       sort_value_name             => sort_title_name,
       sort_value_most_stars       => sort_title_stars,
       sort_value_oldest_activity  => sort_title_latest_activity,
-      sort_value_oldest_created   => sort_title_recently_created,
+      sort_value_oldest_created   => sort_title_created_date,
       sort_value_name_desc        => sort_title_name,
       sort_value_most_stars_asc   => sort_title_stars
     }
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index f52f4eec36a..e62ec3afd0b 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -1,6 +1,7 @@
 - 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)
+- feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar)
 = content_for :flash_message do
   = render 'shared/project_limit'
 
@@ -14,7 +15,7 @@
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.border-0
+  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: feature_project_list_filter_bar ? "border-0" : "" }
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
         = _("Your projects")
@@ -26,10 +27,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")
-  - unless Feature.enabled?(:project_list_filter_bar)
+  - unless feature_project_list_filter_bar
     .nav-controls
       = render 'shared/projects/search_form'
       = render 'shared/projects/dropdown'
-- if Feature.enabled?(:project_list_filter_bar)
+- if feature_project_list_filter_bar
   .project-filters
     = render 'shared/projects/search_bar', is_explore: is_explore, is_explore_trending: is_explore_trending, without_tabs: without_tabs
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index 5e321956f6e..bd21ba6cc71 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -1,6 +1,6 @@
 - has_label = local_assigns[:has_label] ? local_assigns[:has_label] : false
 - if current_user
-  .dropdown
+  .dropdown.js-project-filter-dropdown-wrap
     %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
       - if !has_label
         = icon('globe', class: 'mt-1')
diff --git a/app/views/shared/projects/_dropdown.html.haml b/app/views/shared/projects/_dropdown.html.haml
index 4cecfd16bc1..98b258d9275 100644
--- a/app/views/shared/projects/_dropdown.html.haml
+++ b/app/views/shared/projects/_dropdown.html.haml
@@ -1,46 +1,41 @@
 - @sort ||= sort_value_latest_activity
-.btn-group{ role: "group" }
-  .btn-group.dropdown.js-project-filter-dropdown-wrap.filter-with-icon{ 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
-      = 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 filter_projects_path(sort: value), class: ("is-active" if projects_sort_option_titles[@sort] == title) do
-            = title
+.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' })
+  %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 filter_projects_path(sort: value), class: ("is-active" if @sort == value) do
+          = 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
       %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
+        = link_to filter_projects_path(personal: nil), class: ("is-active" unless params[:personal].present?) do
+          Owned by anyone
       %li
-        = link_to filter_projects_path(archived: 'only'), class: ("is-active" if params[:archived] == 'only') do
-          Show archived projects only
-      - if current_user
+        = link_to filter_projects_path(personal: true), class: ("is-active" if params[:personal].present?) do
+          Owned by me
+      - if @group && @group.shared_projects.present?
         %li.divider
         %li
-          = link_to filter_projects_path(personal: nil), class: ("is-active" unless params[:personal].present?) do
-            Owned by anyone
+          = link_to filter_projects_path(shared: nil), class: ("is-active" unless params[:shared].present?) do
+            All projects
         %li
-          = link_to filter_projects_path(personal: true), class: ("is-active" if params[:personal].present?) do
-            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
-          %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)
+          = 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
diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml
index 7941a0b9173..8c5dd25bee8 100644
--- a/app/views/shared/projects/_search_bar.html.haml
+++ b/app/views/shared/projects/_search_bar.html.haml
@@ -3,29 +3,28 @@
 - 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.mt-2.mt-lg-0
+  .filtered-search-wrapper.d-flex
     - unless without_tabs
       .filtered-search-nav
         = render 'dashboard/projects/nav', is_explore: is_explore, is_explore_trending: is_explore_trending
-    .filtered-search.field-with-icon
+    .filtered-search{ class: without_tabs ? "extended-filtered-search-box" : "" }
       .btn-group{ role: "group" }
         .btn-group{ role: "group" }
-          .filtered-search-box{ class: without_tabs ? "extended-filtered-search-box" : "" }
+          .filtered-search-box
             .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 remove the `js-projects-list-filter` 
+        -#       we might be able to safely 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
         %span
           = _("Visibility")
-      .dropdown.js-project-filter-dropdown-wrap.inline-md
-        = render 'explore/projects/filter', has_label: true
+      = render 'explore/projects/filter', has_label: true
     .filtered-search-dropdown
       .filtered-search-dropdown-label
         %span
           = _("Sort by")
-      = render 'shared/projects/dropdown'
+      = render 'shared/projects/sort_dropdown'
 
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..504ca772815
--- /dev/null
+++ b/app/views/shared/projects/_sort_dropdown.html.haml
@@ -0,0 +1,38 @@
+- @sort ||= sort_value_latest_activity
+.btn-group{ role: "group" }
+  .btn-group.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
+      = 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 filter_projects_path(sort: value), class: ("is-active" if projects_sort_option_titles[@sort] == title) do
+            = 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)