Merge branch '456061-fix-instance-templates-pagination' into 'master'

Fix instance templates pagination

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/152921



Merged-by: Scott Hampton <shampton@gitlab.com>
Approved-by: Alper Akgun <aakgun@gitlab.com>
Approved-by: Scott Hampton <shampton@gitlab.com>
Co-authored-by: Jacques <jerasmus@gitlab.com>

ee/app/assets/javascripts/projects/custom_project_templates.js

@@ -134,23 +134,28 @@ export default () => {
   const tabContent = document.querySelector(INSTANCE_TAB_CONTENT_SELECTOR);
   const groupNavElement = document.querySelector('.js-custom-group-project-templates-nav-link');
   const groupTabContent = document.querySelector(GROUP_TAB_CONTENT_SELECTOR);
+  const findActiveTab = (selector) => document.querySelector(`${selector}.active`);
+  const findPagination = (selector) => findActiveTab(selector)?.querySelector('.pagination');
 
-  const initPagination = (content, handler) => {
+  const initPagination = (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;
+    const pagination =
+      findPagination(INSTANCE_TAB_CONTENT_SELECTOR) || findPagination(GROUP_TAB_CONTENT_SELECTOR);
+    if (!pagination) return;
 
-    el.querySelectorAll('a').forEach((anchor) => anchor.addEventListener('click', handler));
+    pagination.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);
+    const activeTabContent =
+      findActiveTab(INSTANCE_TAB_CONTENT_SELECTOR) || findActiveTab(GROUP_TAB_CONTENT_SELECTOR);
 
-    groupTabContent.innerHTML = secureContent;
-    initPagination(groupTabContent, handlePaginate);
+    activeTabContent.innerHTML = secureContent;
+    initPagination(handlePaginate);
     bindEvents();
   };
 
@@ -159,7 +164,7 @@ export default () => {
     const secureContent = sanitize(response.data);
     // eslint-disable-next-line no-param-reassign
     content.innerHTML = secureContent;
-    initPagination(groupTabContent, handlePaginate);
+    initPagination(handlePaginate);
     bindEvents();
   };
 

ee/spec/frontend/projects/custom_project_templates_spec.js

@@ -6,54 +6,86 @@ 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 INSTANCE_TEMPLATES_ENDPOINT = `${TEST_HOST}/users/root/available_instance_templates`;
+const INSTANCE_TAB_LINK_SELECTOR = '.js-custom-instance-project-templates-nav-link';
+const INSTANCE_TAB_CONTENT_SELECTOR = '.js-custom-instance-project-templates-tab-content';
+
+const GROUP_TEMPLATES_ENDPOINT = `${TEST_HOST}/users/root/available_group_templates`;
+const GROUP_TAB_LINK_SELECTOR = '.js-custom-group-project-templates-nav-link';
+const GROUP_TAB_CONTENT_SELECTOR = '.js-custom-group-project-templates-tab-content';
+
 const INITIAL_CONTENT = 'initial content';
 const NEXT_PAGE_CONTENT = 'page 2 content';
 
+const generateInstanceTabContent = (content) => {
+  return `
+      <div class="js-custom-instance-project-templates-nav-link">Instance tab</div>
+      <div class="js-custom-instance-project-templates-tab-content active" data-initial-templates="${INSTANCE_TEMPLATES_ENDPOINT}">
+          ${content}
+          <ul class="pagination">
+              <li><a href="/users/root/available_instance_templates">Prev</a></li>
+              <li><a href="/users/root/available_instance_templates">1</a></li>
+              <li><a href="/users/root/available_instance_templates?page=2" class="page-2">2</a></li>
+              <li><a href="#" class="page-link" rel="next">Next</a></li>
+          </ul>
+      </div>
+  `;
+};
+
+const generateGroupTabContent = (content) => {
+  return `
+      <div class="js-custom-group-project-templates-nav-link">Group tab</div>
+      <div class="js-custom-group-project-templates-tab-content active" data-initial-templates="${GROUP_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>
+  `;
+};
+
 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);
+  describe.each`
+    tabName       | contentGenerator              | navLinkSelector               | contentSelector                  | endpoint
+    ${'Instance'} | ${generateInstanceTabContent} | ${INSTANCE_TAB_LINK_SELECTOR} | ${INSTANCE_TAB_CONTENT_SELECTOR} | ${INSTANCE_TEMPLATES_ENDPOINT}
+    ${'Group'}    | ${generateGroupTabContent}    | ${GROUP_TAB_LINK_SELECTOR}    | ${GROUP_TAB_CONTENT_SELECTOR}    | ${GROUP_TEMPLATES_ENDPOINT}
+  `(
+    '($tabName tab) requests the correct content',
+    ({ contentGenerator, navLinkSelector, contentSelector, endpoint }) => {
+      const simulateTabNavigation = () => document.querySelector(navLinkSelector).click();
+      const findTabContent = () => document.querySelector(contentSelector);
+
+      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));
+        axiosMock.onGet(endpoint).reply(HTTP_STATUS_OK, contentGenerator(INITIAL_CONTENT));
+        axiosMock
+          .onGet(`${endpoint}?page=2`)
+          .reply(HTTP_STATUS_OK, contentGenerator(NEXT_PAGE_CONTENT));
 
-    setHTMLFixture(generateContent());
-    initCustomProjectTemplates();
-    simulateTabNavigation();
-    await waitForPromises();
-  });
+        setHTMLFixture(contentGenerator());
+        initCustomProjectTemplates();
+        simulateTabNavigation();
+        await waitForPromises();
+      });
 
-  afterEach(() => resetHTMLFixture());
+      afterEach(() => resetHTMLFixture());
 
-  it('requests the initial content', () => {
-    expect(findTabContent().innerText).toContain(INITIAL_CONTENT);
-  });
+      it('requests the initial content', () => {
+        expect(findTabContent().innerText).toContain(INITIAL_CONTENT);
+      });
 
-  it('requests content for the selected page', async () => {
-    simulatePagination();
-    await waitForPromises();
+      it('requests content for the selected page', async () => {
+        simulatePagination();
+        await waitForPromises();
 
-    expect(findTabContent().innerText).toContain(NEXT_PAGE_CONTENT);
-  });
+        expect(findTabContent().innerText).toContain(NEXT_PAGE_CONTENT);
+      });
+    },
+  );
 });