From 063e16a3d6b27e34bb1095b5d217d96707f8a9bb Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Mon, 18 Sep 2023 15:15:22 -0400
Subject: [PATCH] :sparkles: Add client-side pagination to Archetypes table
 (#1370)

Part of #1264, see [checklist
here](https://github.com/konveyor/tackle2-ui/issues/1264#issuecomment-1702928566).

Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
---
 .../app/pages/archetypes/archetypes-page.tsx   | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
index 7fc75fe3c1..b598df804e 100644
--- a/client/src/app/pages/archetypes/archetypes-page.tsx
+++ b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -55,6 +55,7 @@ import { ConfirmDialog } from "@app/components/ConfirmDialog";
 import { formatPath, getAxiosErrorMessage } from "@app/utils/utils";
 import { AxiosError } from "axios";
 import { Paths } from "@app/Paths";
+import { SimplePagination } from "@app/components/SimplePagination";
 
 const Archetypes: React.FC = () => {
   const { t } = useTranslation();
@@ -130,7 +131,7 @@ const Archetypes: React.FC = () => {
     }),
     initialSort: { columnKey: "name", direction: "asc" },
 
-    hasPagination: false, // TODO: Add pagination
+    hasPagination: true,
   });
   const {
     currentPageItems,
@@ -219,7 +220,13 @@ const Archetypes: React.FC = () => {
                     <CreateButton />
                   </ToolbarItem>
                 </ToolbarGroup>
-                {/* TODO: Add pagination */}
+                <ToolbarItem {...paginationToolbarItemProps}>
+                  <SimplePagination
+                    idPrefix="archetypes-table"
+                    isTop
+                    paginationProps={paginationProps}
+                  />
+                </ToolbarItem>
               </ToolbarContent>
             </Toolbar>
 
@@ -315,8 +322,11 @@ const Archetypes: React.FC = () => {
                 ))}
               </ConditionalTableBody>
             </Table>
-
-            {/* TODO: Add pagination */}
+            <SimplePagination
+              idPrefix="archetypes-table"
+              isTop={false}
+              paginationProps={paginationProps}
+            />
           </div>
         </ConditionalRender>
       </PageSection>