Recursively get all of a groups projects

Per default the project API just returns 20 projects. Now we retrieve a
hundred projects per call. If the group has more than a 100 projects, it
will fetch the next pages as well.

ee/app/assets/javascripts/security_dashboard/store/modules/projects/actions.js

 import axios from '~/lib/utils/axios_utils';
 import * as types from './mutation_types';
 
+const getAllProjects = (url, page = '1', projects = []) =>
+  axios({
+    method: 'GET',
+    url,
+    params: {
+      per_page: 100,
+      page,
+      include_subgroups: true,
+      order_by: 'path',
+      sort: 'asc',
+    },
+  }).then(({ headers, data }) => {
+    const result = projects.concat(data);
+    const nextPage = headers && headers['x-next-page'];
+    if (nextPage) {
+      return getAllProjects(url, nextPage, result);
+    }
+    return result;
+  });
+
 export const setProjectsEndpoint = ({ commit }, endpoint) => {
   commit(types.SET_PROJECTS_ENDPOINT, endpoint);
 };
@@ -8,12 +28,9 @@ export const setProjectsEndpoint = ({ commit }, endpoint) => {
 export const fetchProjects = ({ state, dispatch }) => {
   dispatch('requestProjects');
 
-  axios({
-    method: 'GET',
-    url: state.projectsEndpoint,
-  })
-    .then(({ data }) => {
-      dispatch('receiveProjectsSuccess', { projects: data });
+  getAllProjects(state.projectsEndpoint)
+    .then(projects => {
+      dispatch('receiveProjectsSuccess', { projects });
     })
     .catch(() => {
       dispatch('receiveProjectsError');

ee/changelogs/unreleased/9247-security-dashboard-project-filter-limited-to-20-entries.yml

+---
+title: Recursively get all of a groups projects
+merge_request: 9205
+author:
+type: fixed

ee/spec/javascripts/security_dashboard/store/projects/actions_spec.js

@@ -49,6 +49,33 @@ describe('projects actions', () => {
       });
     });
 
+    describe('calls the API multiple times if there is a next page', () => {
+      beforeEach(() => {
+        mock
+          .onGet(state.projectsEndpoint, { page: '1' })
+          .replyOnce(200, [1], { 'x-next-page': '2' });
+
+        mock.onGet(state.projectsEndpoint, { page: '2' }).replyOnce(200, [2]);
+      });
+
+      it('should dispatch the request and success actions', done => {
+        testAction(
+          actions.fetchProjects,
+          {},
+          state,
+          [],
+          [
+            { type: 'requestProjects' },
+            {
+              type: 'receiveProjectsSuccess',
+              payload: { projects: [1, 2] },
+            },
+          ],
+          done,
+        );
+      });
+    });
+
     describe('on error', () => {
       beforeEach(() => {
         mock.onGet(state.projectsEndpoint).replyOnce(404, {});