From 2c5f068a0ab0e187cc564fda6a4765431d8a6a24 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Thu, 21 Mar 2024 10:03:45 +0100
Subject: [PATCH] Fix new project group templates pagination

Implemented a temporary fix for the new project templates pagination

Changelog: fixed
EE: true
---
 .../projects/custom_project_templates.js      | 20 +++++++
 .../projects/custom_project_templates_spec.js | 59 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 ee/spec/frontend/projects/custom_project_templates_spec.js

diff --git a/ee/app/assets/javascripts/projects/custom_project_templates.js b/ee/app/assets/javascripts/projects/custom_project_templates.js
index d631458df2b16d..44a3acf232047a 100644
--- a/ee/app/assets/javascripts/projects/custom_project_templates.js
+++ b/ee/app/assets/javascripts/projects/custom_project_templates.js
@@ -135,11 +135,31 @@ export default () => {
   const groupNavElement = document.querySelector('.js-custom-group-project-templates-nav-link');
   const groupTabContent = document.querySelector(GROUP_TAB_CONTENT_SELECTOR);
 
+  const initPagination = (content, handler) => {
+    // This is a temporary workaround as part of a P1 bug fix
+    // In a future iteration the pagination should be implemented on the frontend
+    const el = content.querySelector('.js-custom-group-project-templates-tab-content .pagination');
+    if (!el) return;
+
+    el.querySelectorAll('a').forEach((anchor) => anchor.addEventListener('click', handler));
+  };
+
+  const handlePaginate = async (e) => {
+    e.preventDefault();
+    const response = await axios.get(e.currentTarget.href);
+    const secureContent = sanitize(response.data);
+
+    groupTabContent.innerHTML = secureContent;
+    initPagination(groupTabContent, handlePaginate);
+    bindEvents();
+  };
+
   const fetchHtmlForTabContent = async (content) => {
     const response = await axios.get(content.dataset.initialTemplates);
     const secureContent = sanitize(response.data);
     // eslint-disable-next-line no-param-reassign
     content.innerHTML = secureContent;
+    initPagination(groupTabContent, handlePaginate);
     bindEvents();
   };
 
diff --git a/ee/spec/frontend/projects/custom_project_templates_spec.js b/ee/spec/frontend/projects/custom_project_templates_spec.js
new file mode 100644
index 00000000000000..aa79c0dbf8cb79
--- /dev/null
+++ b/ee/spec/frontend/projects/custom_project_templates_spec.js
@@ -0,0 +1,59 @@
+import MockAdapter from 'axios-mock-adapter';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import { TEST_HOST } from 'helpers/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
+import initCustomProjectTemplates from 'ee/projects/custom_project_templates';
+
+const TAB_LINK_SELECTOR = '.js-custom-group-project-templates-nav-link';
+const TAB_CONTENT_SELECTOR = '.js-custom-group-project-templates-tab-content';
+const ENDPOINT = `${TEST_HOST}/users/root/available_group_templates`;
+const INITIAL_CONTENT = 'initial content';
+const NEXT_PAGE_CONTENT = 'page 2 content';
+
+describe('initCustomProjectTemplates', () => {
+  const generateContent = (content) => {
+    return `
+        <div class="js-custom-group-project-templates-nav-link">Group tab</div>
+        <div class="js-custom-group-project-templates-tab-content" data-initial-templates="${ENDPOINT}">
+            ${content}
+            <ul class="pagination">
+                <li><a href="/users/root/available_group_templates">Prev</a></li>
+                <li><a href="/users/root/available_group_templates">1</a></li>
+                <li><a href="/users/root/available_group_templates?page=2" class="page-2">2</a></li>
+                <li><a href="#" class="page-link" rel="next">Next</a></li>
+            </ul>
+        </div>
+    `;
+  };
+
+  const simulateTabNavigation = () => document.querySelector(TAB_LINK_SELECTOR).click();
+  const simulatePagination = () => document.querySelector('.page-2').click();
+  const findTabContent = () => document.querySelector(TAB_CONTENT_SELECTOR);
+
+  beforeEach(async () => {
+    const axiosMock = new MockAdapter(axios);
+
+    axiosMock.onGet(ENDPOINT).reply(HTTP_STATUS_OK, generateContent(INITIAL_CONTENT));
+    axiosMock.onGet(`${ENDPOINT}?page=2`).reply(HTTP_STATUS_OK, generateContent(NEXT_PAGE_CONTENT));
+
+    setHTMLFixture(generateContent());
+    initCustomProjectTemplates();
+    simulateTabNavigation();
+    await waitForPromises();
+  });
+
+  afterEach(() => resetHTMLFixture());
+
+  it('requests the initial content', () => {
+    expect(findTabContent().innerText).toContain(INITIAL_CONTENT);
+  });
+
+  it('requests content for the selected page', async () => {
+    simulatePagination();
+    await waitForPromises();
+
+    expect(findTabContent().innerText).toContain(NEXT_PAGE_CONTENT);
+  });
+});
-- 
GitLab