Moves project and groups data to API call on todos

This moves the data that is needed for the projects
and groups dropdown to be an API call instead of the data
getting set on page load.

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:
+author:
+type: performance