Add archived related options in sort dropdown

app/assets/javascripts/groups/groups_filterable_list.js

@@ -25,30 +25,34 @@ export default class GroupFilterableList extends FilterableList {
   bindEvents() {
     super.bindEvents();
 
-    this.onFormSubmitWrapper = this.onFormSubmit.bind(this);
     this.onFilterOptionClikWrapper = this.onOptionClick.bind(this);
 
-    this.filterForm.addEventListener('submit', this.onFormSubmitWrapper);
     this.$dropdown.on('click', 'a', this.onFilterOptionClikWrapper);
   }
 
-  onFormSubmit(e) {
+  onFilterInput() {
-    e.preventDefault();
-
-    const $form = $(this.form);
-    const filterGroupsParam = $form.find(`[name="${this.filterInputField}"]`).val();
     const queryData = {};
+    const $form = $(this.form);
+    const archivedParam = getParameterByName('archived', window.location.href);
+    const filterGroupsParam = $form.find(`[name="${this.filterInputField}"]`).val();
 
     if (filterGroupsParam) {
       queryData[this.filterInputField] = filterGroupsParam;
     }
 
+    if (archivedParam) {
+      queryData.archived = archivedParam;
+    }
+
     this.filterResults(queryData);
-    this.setDefaultFilterOption();
+
+    if (this.setDefaultFilterOption) {
+      this.setDefaultFilterOption();
+    }
   }
 
   setDefaultFilterOption() {
-    const defaultOption = $.trim(this.$dropdown.find('.dropdown-menu a').first().text());
+    const defaultOption = $.trim(this.$dropdown.find('.dropdown-menu li.js-filter-sort-order a').first().text());
     this.$dropdown.find('.dropdown-label').text(defaultOption);
   }
 
@@ -56,17 +60,34 @@ export default class GroupFilterableList extends FilterableList {
     e.preventDefault();
 
     const queryData = {};
-    const sortParam = getParameterByName('sort', e.currentTarget.href);
+
+    // Get type of option selected from dropdown
+    const currentTargetClassList = e.currentTarget.parentElement.classList;
+    const isOptionFilterBySort = currentTargetClassList.contains('js-filter-sort-order');
+
+    // Get option query param, also preserve currently applied query param
+    const isOptionFilterByArchivedProjects = currentTargetClassList.contains('js-filter-archived-projects');
+    const sortParam = getParameterByName('sort', e.currentTarget.href) || getParameterByName('sort', window.location.href);
+    const archivedParam = getParameterByName('archived', e.currentTarget.href) || getParameterByName('archived', window.location.href);
 
     if (sortParam) {
       queryData.sort = sortParam;
     }
 
+    if (archivedParam) {
+      queryData.archived = archivedParam;
+    }
+
     this.filterResults(queryData);
 
     // Active selected option
-    this.$dropdown.find('.dropdown-label').text($.trim(e.currentTarget.text));
+    if (isOptionFilterBySort) {
-    this.$dropdown.find('.dropdown-menu li a').removeClass('is-active');
+      this.$dropdown.find('.dropdown-label').text($.trim(e.currentTarget.text));
+      this.$dropdown.find('.dropdown-menu li.js-filter-sort-order a').removeClass('is-active');
+    } else if (isOptionFilterByArchivedProjects) {
+      this.$dropdown.find('.dropdown-menu li.js-filter-archived-projects a').removeClass('is-active');
+    }
+
     $(e.target).addClass('is-active');
 
     // Clear current value on search form

app/views/groups/show.html.haml

@@ -11,7 +11,7 @@
   .group-nav-container
     .nav-controls.clearfix
       = render "shared/groups/search_form"
-      = render "shared/groups/dropdown"
+      = render "shared/groups/dropdown", show_archive_options: true
       - if can? current_user, :create_projects, @group
         - new_project_label = _("New project")
         - new_subgroup_label = _("New subgroup")

app/views/shared/groups/_dropdown.html.haml

@@ -1,3 +1,4 @@
+- show_archive_options = local_assigns.fetch(:show_archive_options, false)
 - if @sort.present?
   - default_sort_by = @sort
 - else
@@ -15,6 +16,17 @@
     %li.dropdown-header
       = _("Sort by")
     - groups_sort_options_hash.each do |value, title|
-      %li
+      %li.js-filter-sort-order
-        = link_to filter_groups_path(sort: value), class: "#{ 'is-active' if default_sort_by == value }" do
+        = link_to filter_groups_path(sort: value), class: ("is-active" if default_sort_by == value) do
           = title
+    - if show_archive_options
+      %li.divider
+      %li.js-filter-archived-projects
+        = link_to group_children_path(@group, archived: nil), class: ("is-active" unless params[:archived].present?) do
+          Hide archived projects
+      %li.js-filter-archived-projects
+        = link_to group_children_path(@group, archived: true), class: ("is-active" if Gitlab::Utils.to_boolean(params[:archived])) do
+          Show archived projects
+      %li.js-filter-archived-projects
+        = link_to group_children_path(@group, archived: 'only'), class: ("is-active" if params[:archived] == 'only') do
+          Show archived projects only