Filter projects by group on search page

After selecting a group, the projects dropdown will now filter by group projects instead

Closes #29489

app/assets/javascripts/search.js

@@ -1,4 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, max-len */
+/* global Flash */
 /* global Api */
 
 (function() {
@@ -7,6 +8,7 @@
       var $groupDropdown, $projectDropdown;
       $groupDropdown = $('.js-search-group-dropdown');
       $projectDropdown = $('.js-search-project-dropdown');
+      this.groupId = $groupDropdown.data('group-id');
       this.eventListeners();
       $groupDropdown.glDropdown({
         selectable: true,
@@ -46,14 +48,18 @@
         search: {
           fields: ['name']
         },
-        data: function(term, callback) {
-          return Api.projects(term, { order_by: 'id' }, function(data) {
-            data.unshift({
-              name_with_namespace: 'Any'
-            });
-            data.splice(1, 0, 'divider');
-            return callback(data);
-          });
+        data: (term, callback) => {
+          this.getProjectsData(term)
+            .then((data) => {
+              data.unshift({
+                name_with_namespace: 'Any'
+              });
+              data.splice(1, 0, 'divider');
+
+              return data;
+            })
+            .then(data => callback(data))
+            .catch(() => new Flash('Error fetching projects'));
         },
         id: function(obj) {
           return obj.id;
@@ -95,6 +101,18 @@
       return $('.js-search-input').val('').trigger('keyup').focus();
     };
 
+    Search.prototype.getProjectsData = function(term) {
+      return new Promise((resolve) => {
+        if (this.groupId) {
+          Api.groupProjects(this.groupId, term, resolve);
+        } else {
+          Api.projects(term, {
+            order_by: 'id',
+          }, resolve);
+        }
+      });
+    };
+
     return Search;
   })();
 }).call(window);

app/views/search/_filter.html.haml

@@ -3,7 +3,7 @@
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
 .dropdown
-  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Group:" } }
+  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Group:", group_id: params[:group_id] } }
     %span.dropdown-toggle-text
       Group:
       - if @group.present?

changelogs/unreleased/search-restrict-projects-to-group.yml

@@ -0,0 +1,4 @@
+---
+title: Restricts search projects dropdown to group projects when group is selected
+merge_request:
+author:

spec/features/search_spec.rb

@@ -20,6 +20,7 @@ describe "Search", feature: true  do
 
   context 'search filters', js: true do
     let(:group) { create(:group) }
+    let!(:group_project) { create(:empty_project, group: group) }
 
     before do
       group.add_owner(user)
@@ -36,6 +37,24 @@ describe "Search", feature: true  do
       expect(find('.js-search-group-dropdown')).to have_content(group.name)
     end
 
+    it 'filters by group projects after filtering by group' do
+      find('.js-search-group-dropdown').click
+      wait_for_ajax
+
+      page.within '.search-holder' do
+        click_link group.name
+      end
+
+      expect(find('.js-search-group-dropdown')).to have_content(group.name)
+
+      page.within('.project-filter') do
+        find('.js-search-project-dropdown').click
+        wait_for_ajax
+
+        expect(page).to have_link(group_project.name_with_namespace)
+      end
+    end
+
     it 'shows project name after filtering' do
       page.within('.project-filter') do
         find('.js-search-project-dropdown').click