Fixed file templates not being fully fetched in Web IDE

Closes #51912

app/assets/javascripts/ide/stores/modules/file_templates/actions.js

 import Api from '~/api';
 import { __ } from '~/locale';
+import { normalizeHeaders } from '~/lib/utils/common_utils';
 import * as types from './mutation_types';
 import eventHub from '../../../eventhub';
 
@@ -22,13 +23,21 @@ export const receiveTemplateTypesError = ({ commit, dispatch }) => {
 export const receiveTemplateTypesSuccess = ({ commit }, templates) =>
   commit(types.RECEIVE_TEMPLATE_TYPES_SUCCESS, templates);
 
-export const fetchTemplateTypes = ({ dispatch, state }) => {
+export const fetchTemplateTypes = ({ dispatch, state }, page = 1) => {
   if (!Object.keys(state.selectedTemplateType).length) return Promise.reject();
 
   dispatch('requestTemplateTypes');
 
-  return Api.templates(state.selectedTemplateType.key)
-    .then(({ data }) => dispatch('receiveTemplateTypesSuccess', data))
+  return Api.templates(state.selectedTemplateType.key, { page })
+    .then(({ data, headers }) => {
+      const nextPage = parseInt(normalizeHeaders(headers)['X-NEXT-PAGE'], 10);
+
+      dispatch('receiveTemplateTypesSuccess', data);
+
+      if (nextPage) {
+        dispatch('fetchTemplateTypes', nextPage);
+      }
+    })
     .catch(() => dispatch('receiveTemplateTypesError'));
 };
 

app/assets/javascripts/ide/stores/modules/file_templates/mutations.js

@@ -9,7 +9,7 @@ export default {
   },
   [types.RECEIVE_TEMPLATE_TYPES_SUCCESS](state, templates) {
     state.isLoading = false;
-    state.templates = templates;
+    state.templates = state.templates.concat(templates);
   },
   [types.SET_SELECTED_TEMPLATE_TYPE](state, type) {
     state.selectedTemplateType = type;

changelogs/unreleased/ide-fetch-templates-pages.yml

+---
+title: Fixed file templates not fully being fetched in Web IDE
+merge_request:
+author:
+type: fixed

spec/javascripts/ide/stores/modules/file_templates/actions_spec.js

@@ -69,11 +69,17 @@ describe('IDE file templates actions', () => {
 
   describe('fetchTemplateTypes', () => {
     describe('success', () => {
+      let nextPage;
+
       beforeEach(() => {
-        mock.onGet(/api\/(.*)\/templates\/licenses/).replyOnce(200, [
-          {
-            name: 'MIT',
-          },
+        mock.onGet(/api\/(.*)\/templates\/licenses/).replyOnce(() => [
+          200,
+          [
+            {
+              name: 'MIT',
+            },
+          ],
+          { 'X-NEXT-PAGE': nextPage },
         ]);
       });
 
@@ -116,6 +122,38 @@ describe('IDE file templates actions', () => {
           done,
         );
       });
+
+      it('dispatches actions for next page', done => {
+        nextPage = '2';
+        state.selectedTemplateType = {
+          key: 'licenses',
+        };
+
+        testAction(
+          actions.fetchTemplateTypes,
+          null,
+          state,
+          [],
+          [
+            {
+              type: 'requestTemplateTypes',
+            },
+            {
+              type: 'receiveTemplateTypesSuccess',
+              payload: [
+                {
+                  name: 'MIT',
+                },
+              ],
+            },
+            {
+              type: 'fetchTemplateTypes',
+              payload: 2,
+            },
+          ],
+          done,
+        );
+      });
     });
 
     describe('error', () => {