feat: added pagination to repoList

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/__tests__/TagPage/TagDetails.test.js

@@ -73,6 +73,10 @@ jest.mock('react-router-dom', () => ({
   }
 }));
 
+jest.mock('../../host', () => ({
+  host: () => 'http://localhost'
+}));
+
 beforeEach(() => {
   window.scrollTo = jest.fn();
 });
@@ -107,8 +111,10 @@ describe('Tags details', () => {
   });
 
   it('should copy the pull string to clipboard', async () => {
-    // @ts-ignore
-    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImage } });
+    jest
+      .spyOn(api, 'get')
+      // @ts-ignore
+      .mockResolvedValue({ status: 200, data: { data: { ...mockImage, RepoName: 'test', Tag: '1.0.1' } } });
     render(<TagDetails />);
     fireEvent.click(await screen.findByTestId('pullcopy-btn'));
     await waitFor(() => expect(mockCopyToClipboard).toHaveBeenCalledWith('docker pull http://localhost/test:1.0.1'));

src/api.js

@@ -60,8 +60,10 @@ const api = {
 };
 
 const endpoints = {
-  repoList:
-    '/v2/_zot/ext/search?query={RepoListWithNewestImage(){Name LastUpdated Size Platforms {Os Arch}  NewestImage { Tag  Description  Licenses Title Source Documentation History {Layer {Size Digest} HistoryDescription {Created CreatedBy Author Comment EmptyLayer}} Vendor Labels} DownloadCount}}',
+  repoList: ({ pageNumber = 1, pageSize = 15 } = {}) =>
+    `/v2/_zot/ext/search?query={RepoListWithNewestImage(requestedPage: {limit:${pageSize} offset:${
+      (pageNumber - 1) * pageNumber
+    }}){Name LastUpdated Size Platforms {Os Arch}  NewestImage { Tag  Description  Licenses Title Source Documentation History {Layer {Size Digest} HistoryDescription {Created CreatedBy Author Comment EmptyLayer}} Vendor Labels} DownloadCount}}`,
   detailedRepoInfo: (name) =>
     `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Digest Tag Layers {Size Digest}} Summary {Name LastUpdated Size Platforms {Os Arch} Vendors NewestImage {RepoName Layers {Size Digest} Digest Tag Title Documentation DownloadCount Source Description History {Layer {Size Digest} HistoryDescription {Created CreatedBy Author Comment EmptyLayer}}}}}}`,
   detailedImageInfo: (name, tag) =>

src/components/Home.jsx

@@ -71,7 +71,7 @@ function Home() {
     window.scrollTo(0, 0);
     setIsLoading(true);
     api
-      .get(`${host()}${endpoints.repoList}`, abortController.signal)
+      .get(`${host()}${endpoints.repoList()}`, abortController.signal)
       .then((response) => {
         if (response.data && response.data.data) {
           let repoList = response.data.data.RepoListWithNewestImage;