Merge branch 'ph/todosProjectGroupDropdownApiCall' into 'master'

Moves project and groups data to API call on todos

See merge request gitlab-org/gitlab!56507

app/assets/javascripts/pages/dashboard/todos/index/todos.js

 /* eslint-disable class-methods-use-this, no-unneeded-ternary */
 
 import $ from 'jquery';
+import { getGroups } from '~/api/groups_api';
+import { getProjects } from '~/api/projects_api';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -41,14 +43,37 @@ export default class Todos {
   }
 
   initFilters() {
-    this.initFilterDropdown($('.js-group-search'), 'group_id', ['text']);
-    this.initFilterDropdown($('.js-project-search'), 'project_id', ['text']);
+    this.initAjaxFilterDropdown(getGroups, $('.js-group-search'), 'group_id');
+    this.initAjaxFilterDropdown(getProjects, $('.js-project-search'), 'project_id');
     this.initFilterDropdown($('.js-type-search'), 'type');
     this.initFilterDropdown($('.js-action-search'), 'action_id');
 
     return new UsersSelect();
   }
 
+  initAjaxFilterDropdown(apiMethod, $dropdown, fieldName) {
+    initDeprecatedJQueryDropdown($dropdown, {
+      fieldName,
+      selectable: true,
+      filterable: true,
+      filterRemote: true,
+      data(search, callback) {
+        return apiMethod(search, {}, (data) => {
+          callback(
+            data.map((d) => ({
+              id: d.id,
+              text: d.full_name || d.name_with_namespace,
+            })),
+          );
+        });
+      },
+      clicked: () => {
+        const $formEl = $dropdown.closest('form.filter-form');
+        $formEl.submit();
+      },
+    });
+  }
+
   initFilterDropdown($dropdown, fieldName, searchFields) {
     initDeprecatedJQueryDropdown($dropdown, {
       fieldName,
@@ -58,12 +83,6 @@ export default class Todos {
       data: $dropdown.data('data'),
       clicked: () => {
         const $formEl = $dropdown.closest('form.filter-form');
-        const mutexDropdowns = {
-          group_id: 'project_id',
-          project_id: 'group_id',
-        };
-
-        $formEl.find(`input[name="${mutexDropdowns[fieldName]}"]`).remove();
         $formEl.submit();
       },
     });

app/helpers/todos_helper.rb

@@ -157,16 +157,6 @@ module TodosHelper
     ]
   end
 
-  def todo_projects_options
-    projects = current_user.authorized_projects.sorted_by_activity.non_archived.with_route
-
-    projects = projects.map do |project|
-      { id: project.id, text: project.full_name }
-    end
-
-    projects.unshift({ id: '', text: 'Any Project' }).to_json
-  end
-
   def todo_types_options
     [
       { id: '', text: 'Any Type' },
@@ -240,14 +230,6 @@ module TodosHelper
       false
     end
   end
-
-  def todo_group_options
-    groups = current_user.authorized_groups.with_route.map do |group|
-      { id: group.id, text: group.full_name }
-    end
-
-    groups.unshift({ id: '', text: 'Any Group' }).to_json
-  end
 end
 
 TodosHelper.prepend_if_ee('EE::TodosHelper')

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

@@ -42,12 +42,12 @@
             - if params[:group_id].present?
               = hidden_field_tag(:group_id, params[:group_id])
             = dropdown_tag(group_dropdown_label(params[:group_id], 'Group'), options: { toggle_class: 'js-group-search js-filter-submit', title: 'Filter by group', filter: true, filterInput: 'input#group-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-group js-filter-submit',
-              placeholder: 'Search groups', data: { data: todo_group_options, default_label: 'Group', display: 'static' } })
+              placeholder: 'Search groups', data: { default_label: 'Group', display: 'static' } })
           .filter-item.inline
             - if params[:project_id].present?
               = hidden_field_tag(:project_id, params[:project_id])
             = dropdown_tag(project_dropdown_label(params[:project_id], 'Project'), options: { toggle_class: 'js-project-search js-filter-submit', title: 'Filter by project', filter: true, filterInput: 'input#project-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
-              placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project', display: 'static' } })
+              placeholder: 'Search projects', data: { default_label: 'Project', display: 'static' } })
           .filter-item.inline
             - if params[:author_id].present?
               = hidden_field_tag(:author_id, params[:author_id])

changelogs/unreleased/ph-todosProjectGroupDropdownApiCall.yml

+---
+title: Move fetching projects and groups on todos page to API call
+merge_request: 56507
+author:
+type: performance

spec/helpers/todos_helper_spec.rb

@@ -40,26 +40,6 @@ RSpec.describe TodosHelper do
     end
   end
 
-  describe '#todo_projects_options' do
-    let(:projects) { create_list(:project, 3) }
-    let(:user)     { create(:user) }
-
-    it 'returns users authorised projects in json format' do
-      projects.first.add_developer(user)
-      projects.second.add_developer(user)
-
-      allow(helper).to receive(:current_user).and_return(user)
-
-      expected_results = [
-        { 'id' => '', 'text' => 'Any Project' },
-        { 'id' => projects.second.id, 'text' => projects.second.full_name },
-        { 'id' => projects.first.id, 'text' => projects.first.full_name }
-      ]
-
-      expect(Gitlab::Json.parse(helper.todo_projects_options)).to match_array(expected_results)
-    end
-  end
-
   describe '#todo_target_link' do
     context 'when given a design' do
       let(:todo) { design_todo }