From 051029e7a4597f14b4f175d2de67370f47f52703 Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Fri, 15 Sep 2023 14:25:01 -0400
Subject: [PATCH] :sparkles: Add pagination to Archetypes table

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 1ae503fec9..614471d53e 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();
@@ -127,7 +128,7 @@ const Archetypes: React.FC = () => {
     }),
     initialSort: { columnKey: "name", direction: "asc" },
 
-    hasPagination: false, // TODO: Add pagination
+    hasPagination: true,
   });
   const {
     currentPageItems,
@@ -216,7 +217,13 @@ const Archetypes: React.FC = () => {
                     <CreateButton />
                   </ToolbarItem>
                 </ToolbarGroup>
-                {/* TODO: Add pagination */}
+                <ToolbarItem {...paginationToolbarItemProps}>
+                  <SimplePagination
+                    idPrefix="archetypes-table"
+                    isTop
+                    paginationProps={paginationProps}
+                  />
+                </ToolbarItem>
               </ToolbarContent>
             </Toolbar>
 
@@ -311,8 +318,11 @@ const Archetypes: React.FC = () => {
                 ))}
               </ConditionalTableBody>
             </Table>
-
-            {/* TODO: Add pagination */}
+            <SimplePagination
+              idPrefix="archetypes-table"
+              isTop={false}
+              paginationProps={paginationProps}
+            />
           </div>
         </ConditionalRender>
       </PageSection>