SONAR-15488 Fix pagination if total is undefined and page size is known

Co-authored-by: Guillaume Peoch <guillaume.peoch@sonarsource.com>

5 files changed, 60 insertions, 7 deletions

diff --git a/server/sonar-web/src/main/js/apps/create/project/GitlabProjectSelectionForm.tsx b/server/sonar-web/src/main/js/apps/create/project/GitlabProjectSelectionForm.tsx
index 017dc9cb6a3..ed94e6ee0e2 100644
--- a/server/sonar-web/src/main/js/apps/create/project/GitlabProjectSelectionForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/GitlabProjectSelectionForm.tsx
@@ -159,6 +159,7 @@ export default function GitlabProjectSelectionForm(props: GitlabProjectSelection
         count={projects.length}
         loadMore={props.onLoadMore}
         loading={loadingMore}
+        pageSize={projectsPaging.pageSize}
         total={projectsPaging.total}
       />
     </div>
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitlabProjectSelectionForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitlabProjectSelectionForm-test.tsx.snap
index ae69acae3ee..f179ea42dac 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitlabProjectSelectionForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitlabProjectSelectionForm-test.tsx.snap
@@ -137,6 +137,7 @@ exports[`should render correctly: importing 1`] = `
     count={2}
     loadMore={[MockFunction]}
     loading={false}
+    pageSize={30}
     total={2}
   />
 </div>
@@ -194,6 +195,7 @@ exports[`should render correctly: no projects when searching 1`] = `
     count={0}
     loadMore={[MockFunction]}
     loading={false}
+    pageSize={30}
     total={0}
   />
 </div>
@@ -336,6 +338,7 @@ exports[`should render correctly: projects 1`] = `
     count={2}
     loadMore={[MockFunction]}
     loading={false}
+    pageSize={30}
     total={2}
   />
 </div>
diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
index f0099201389..c288c6e09be 100644
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
@@ -30,14 +30,21 @@ export interface ListFooterProps {
   loading?: boolean;
   loadMore?: () => void;
   needReload?: boolean;
+  pageSize?: number;
   reload?: () => void;
   ready?: boolean;
   total?: number;
 }
 
 export default function ListFooter(props: ListFooterProps) {
-  const { className, count, loading, needReload, total, ready = true } = props;
-  const hasMore = total && total > count;
+  const { className, count, loading, needReload, total, pageSize, ready = true } = props;
+
+  let hasMore = false;
+  if (total !== undefined) {
+    hasMore = total > count;
+  } else if (pageSize !== undefined) {
+    hasMore = count % pageSize === 0;
+  }
 
   let button;
   if (needReload && props.reload) {
@@ -61,11 +68,13 @@ export default function ListFooter(props: ListFooterProps) {
   return (
     <footer
       className={classNames('spacer-top note text-center', { 'new-loading': !ready }, className)}>
-      {translateWithParameters(
-        'x_of_y_shown',
-        formatMeasure(count, 'INT', null),
-        formatMeasure(total, 'INT', null)
-      )}
+      {total !== undefined
+        ? translateWithParameters(
+            'x_of_y_shown',
+            formatMeasure(count, 'INT', null),
+            formatMeasure(total, 'INT', null)
+          )
+        : translateWithParameters('x_show', formatMeasure(count, 'INT', null))}
       {button}
       {loading && <DeferredSpinner className="text-bottom spacer-left position-absolute" />}
     </footer>
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ListFooter-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ListFooter-test.tsx
index 8970e984359..6bf72988359 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ListFooter-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ListFooter-test.tsx
@@ -34,8 +34,25 @@ it('should render correctly', () => {
     'empty if no loadMore nor reload props'
   );
   expect(shallowRender({ count: 5 })).toMatchSnapshot('empty if everything is loaded');
+  expect(shallowRender({ total: undefined })).toMatchSnapshot('total undefined');
+  expect(shallowRender({ total: undefined, count: 60, pageSize: 30 })).toMatchSnapshot(
+    'force show load more button if count % pageSize is 0, and total is undefined'
+  );
 });
 
+it.each([
+  [undefined, 60, 30, true],
+  [undefined, 45, 30, false],
+  [undefined, 60, undefined, false],
+  [60, 60, 30, false]
+])(
+  'handle showing load more button based on total, count and pageSize',
+  (total, count, pageSize, expected) => {
+    const wrapper = shallowRender({ total, count, pageSize });
+    expect(wrapper.find(Button).exists()).toBe(expected);
+  }
+);
+
 it('should properly call loadMore', () => {
   const loadMore = jest.fn();
   const wrapper = shallowRender({ loadMore });
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
index 2d55aa0d03b..1ef2198b487 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
@@ -31,6 +31,21 @@ exports[`should render correctly: empty if no loadMore nor reload props 1`] = `
 </footer>
 `;
 
+exports[`should render correctly: force show load more button if count % pageSize is 0, and total is undefined 1`] = `
+<footer
+  className="spacer-top note text-center"
+>
+  x_show.60
+  <Button
+    className="spacer-left"
+    data-test="show-more"
+    onClick={[MockFunction]}
+  >
+    show_more
+  </Button>
+</footer>
+`;
+
 exports[`should render correctly: loading 1`] = `
 <footer
   className="spacer-top note text-center"
@@ -83,3 +98,11 @@ exports[`should render correctly: reload, loading 1`] = `
   />
 </footer>
 `;
+
+exports[`should render correctly: total undefined 1`] = `
+<footer
+  className="spacer-top note text-center"
+>
+  x_show.3
+</footer>
+`;