From 8c763d798e3fa2087f684479978e942478bce9fb Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 25 Aug 2023 20:02:16 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(PaginatorComponent):=20add?=
 =?UTF-8?q?=20useEffect=20to=20update=20maxPageIndex=20when=20totalRowsCou?=
 =?UTF-8?q?nt=20changes=20=E2=9C=A8=20feat(ApiKeysPage):=20add=20Header=20?=
 =?UTF-8?q?component=20to=20the=20page=20layout=20for=20better=20organizat?=
 =?UTF-8?q?ion=20and=20structure=20=F0=9F=90=9B=20fix(ApiKeysPage):=20fix?=
 =?UTF-8?q?=20import=20order=20to=20follow=20convention=20and=20improve=20?=
 =?UTF-8?q?readability=20=F0=9F=90=9B=20fix(ApiKeysPage):=20fix=20indentat?=
 =?UTF-8?q?ion=20and=20formatting=20issues=20for=20better=20code=20readabi?=
 =?UTF-8?q?lity=20=E2=9C=A8=20feat(ApiKeysPage):=20add=20conditional=20ren?=
 =?UTF-8?q?dering=20for=20displaying=20a=20message=20when=20user=20has=20n?=
 =?UTF-8?q?o=20assigned=20keys=20=F0=9F=90=9B=20fix(ApiKeysPage):=20fix=20?=
 =?UTF-8?q?indentation=20and=20formatting=20issues=20for=20better=20code?=
 =?UTF-8?q?=20readability=20=E2=9C=A8=20feat(ApiKeysPage):=20add=20table?=
 =?UTF-8?q?=20component=20to=20display=20the=20list=20of=20keys=20with=20t?=
 =?UTF-8?q?heir=20details=20=F0=9F=90=9B=20fix(ApiKeysPage):=20fix=20inden?=
 =?UTF-8?q?tation=20and=20formatting=20issues=20for=20better=20code=20read?=
 =?UTF-8?q?ability=20=E2=9C=A8=20feat(ApiKeysPage):=20add=20ConfirmationMo?=
 =?UTF-8?q?dal=20component=20for=20deleting=20keys=20with=20appropriate=20?=
 =?UTF-8?q?title=20and=20content=20=F0=9F=90=9B=20fix(ApiKeysPage):=20fix?=
 =?UTF-8?q?=20indentation=20and=20formatting=20issues=20for=20better=20cod?=
 =?UTF-8?q?e=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PaginatorComponent/index.tsx   |   6 +-
 src/frontend/src/pages/ApiKeysPage/index.tsx  | 182 +++++++++---------
 2 files changed, 101 insertions(+), 87 deletions(-)

diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/PaginatorComponent/index.tsx
index 0e9242f15..543daa6f6 100644
--- a/src/frontend/src/components/PaginatorComponent/index.tsx
+++ b/src/frontend/src/components/PaginatorComponent/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Select,
   SelectContent,
@@ -24,6 +24,10 @@ export default function PaginatorComponent({
   );
   const [currentPage, setCurrentPage] = useState(1);
 
+  useEffect(() => {
+    setMaxPageIndex(Math.ceil(totalRowsCount / size));
+  }, [totalRowsCount]);
+  
   return (
     <>
       <div className="flex items-center justify-between px-2">
diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx
index 2136aa152..5962540d4 100644
--- a/src/frontend/src/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/ApiKeysPage/index.tsx
@@ -17,8 +17,8 @@ import ConfirmationModal from "../../modals/ConfirmationModal";
 import SecretKeyModal from "../../modals/SecretKeyModal";
 
 import moment from "moment";
-import { ApiKey } from "../../types/components";
 import Header from "../../components/headerComponent";
+import { ApiKey } from "../../types/components";
 
 export default function ApiKeysPage() {
   const [loadingKeys, setLoadingKeys] = useState(true);
@@ -81,7 +81,7 @@ export default function ApiKeysPage() {
 
   return (
     <>
-    <Header></Header>
+      <Header></Header>
       {userData && (
         <div className="main-page-panel">
           <div className="m-auto flex h-full flex-row justify-center">
@@ -106,7 +106,9 @@ export default function ApiKeysPage() {
                 {keysList.current.length === 0 && !loadingKeys && (
                   <>
                     <div className="flex items-center justify-between">
-                      <h2>This user does not have any keys assigned at the moment.</h2>
+                      <h2>
+                        This user does not have any keys assigned at the moment.
+                      </h2>
                     </div>
                   </>
                 )}
@@ -122,91 +124,99 @@ export default function ApiKeysPage() {
                       (loadingKeys ? " border-0" : "")
                     }
                   >
-                    <Table className={"table-fixed bg-muted outline-1"}>
-                      <TableHeader
-                        className={
-                          loadingKeys
-                            ? "hidden"
-                            : "table-fixed bg-muted outline-1"
-                        }
-                      >
-                        <TableRow>
-                          <TableHead className="h-10">Name</TableHead>
-                          <TableHead className="h-10">Key</TableHead>
-                          <TableHead className="h-10">Created</TableHead>
-                          <TableHead className="flex h-10 items-center">
-                            Last Used
-                            <ShadTooltip side="top" content={lastUsedMessage()}>
-                              <div>
-                                <IconComponent
-                                  name="Info"
-                                  className="ml-1 h-3 w-3"
-                                />
-                              </div>
-                            </ShadTooltip>
-                          </TableHead>
-                          <TableHead className="h-10 w-[100px]  text-right"></TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      {!loadingKeys && (
-                        <TableBody>
-                          {keysList.current.map(
-                            (api_keys: ApiKey, index: number) => (
-                              <TableRow key={index}>
-                                <TableCell className="truncate py-2">
-                                  <ShadTooltip content={api_keys.name}>
+                    {keysList.current.length > 0 && !loadingKeys && (
+                      <Table className={"table-fixed bg-muted outline-1"}>
+                        <TableHeader
+                          className={
+                            loadingKeys 
+                              ? "hidden"
+                              : "table-fixed bg-muted outline-1"
+                          }
+                        >
+                          <TableRow>
+                            <TableHead className="h-10">Name</TableHead>
+                            <TableHead className="h-10">Key</TableHead>
+                            <TableHead className="h-10">Created</TableHead>
+                            <TableHead className="flex h-10 items-center">
+                              Last Used
+                              <ShadTooltip
+                                side="top"
+                                content={lastUsedMessage()}
+                              >
+                                <div>
+                                  <IconComponent
+                                    name="Info"
+                                    className="ml-1 h-3 w-3"
+                                  />
+                                </div>
+                              </ShadTooltip>
+                            </TableHead>
+                            <TableHead className="h-10 w-[100px]  text-right"></TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        {!loadingKeys && (
+                          <TableBody>
+                            {keysList.current.map(
+                              (api_keys: ApiKey, index: number) => (
+                                <TableRow key={index}>
+                                  <TableCell className="truncate py-2">
+                                    <ShadTooltip content={api_keys.name}>
+                                      <span className="cursor-default">
+                                        {api_keys.name}
+                                      </span>
+                                    </ShadTooltip>
+                                  </TableCell>
+                                  <TableCell className="truncate py-2">
                                     <span className="cursor-default">
-                                      {api_keys.name}
+                                      {api_keys.api_key}
                                     </span>
-                                  </ShadTooltip>
-                                </TableCell>
-                                <TableCell className="truncate py-2">
-                                  <span className="cursor-default">
-                                    {api_keys.api_key}
-                                  </span>
-                                </TableCell>
-                                <TableCell className="truncate py-2 ">
-                                  {moment(api_keys.created_at).format(
-                                    "YYYY-MM-DD HH:mm"
-                                  )}
-                                </TableCell>
-                                <TableCell className="truncate py-2">
-                                  {moment(api_keys.last_used_at).format(
-                                    "YYYY-MM-DD HH:mm"
-                                  )}
-                                </TableCell>
-                                <TableCell className="flex w-[100px] py-2 text-right">
-                                  <div className="flex">
-                                    <ConfirmationModal
-                                      title="Delete"
-                                      titleHeader="Delete User"
-                                      modalContentTitle="Attention!"
-                                      modalContent="Are you sure you want to delete this key? This action cannot be undone."
-                                      cancelText="Cancel"
-                                      confirmationText="Delete"
-                                      icon={"UserMinus2"}
-                                      data={api_keys.id}
-                                      index={index}
-                                      onConfirm={(index, keys) => {
-                                        console.log(keys);
-                                        handleDeleteKey(keys);
-                                      }}
-                                    >
-                                      <ShadTooltip content="Delete" side="top">
-                                        <IconComponent
-                                          name="Trash2"
-                                          className="ml-2 h-4 w-4 cursor-pointer"
-                                        />
-                                      </ShadTooltip>
-                                    </ConfirmationModal>
-                                  </div>
-                                </TableCell>
-                              </TableRow>
-                            )
-                          )}
-                        </TableBody>
-                      )}
-                    </Table>
+                                  </TableCell>
+                                  <TableCell className="truncate py-2 ">
+                                    {moment(api_keys.created_at).format(
+                                      "YYYY-MM-DD HH:mm"
+                                    )}
+                                  </TableCell>
+                                  <TableCell className="truncate py-2">
+                                    {moment(api_keys.last_used_at).format(
+                                      "YYYY-MM-DD HH:mm"
+                                    )}
+                                  </TableCell>
+                                  <TableCell className="flex w-[100px] py-2 text-right">
+                                    <div className="flex">
+                                      <ConfirmationModal
+                                        title="Delete"
+                                        titleHeader="Delete User"
+                                        modalContentTitle="Attention!"
+                                        modalContent="Are you sure you want to delete this key? This action cannot be undone."
+                                        cancelText="Cancel"
+                                        confirmationText="Delete"
+                                        icon={"UserMinus2"}
+                                        data={api_keys.id}
+                                        index={index}
+                                        onConfirm={(index, keys) => {
+                                          console.log(keys);
+                                          handleDeleteKey(keys);
+                                        }}
+                                      >
+                                        <ShadTooltip
+                                          content="Delete"
+                                          side="top"
+                                        >
+                                          <IconComponent
+                                            name="Trash2"
+                                            className="ml-2 h-4 w-4 cursor-pointer"
+                                          />
+                                        </ShadTooltip>
+                                      </ConfirmationModal>
+                                    </div>
+                                  </TableCell>
+                                </TableRow>
+                              )
+                            )}
+                          </TableBody>
+                        )}
+                      </Table>
+                    )}
                   </div>
 
                   <div className="flex items-center justify-between">