From 8e662e65f6ea595016db21b99328cc7822d0b92e Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 17 Aug 2023 19:51:40 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(ApiKeysPage):=20add=20missin?=
 =?UTF-8?q?g=20TableHead=20for=20'Id'=20column=20to=20improve=20table=20st?=
 =?UTF-8?q?ructure=20=E2=9C=A8=20feat(ApiKeysPage):=20add=20tooltip=20and?=
 =?UTF-8?q?=20cursor-default=20to=20display=20the=20full=20'Id'=20value=20?=
 =?UTF-8?q?in=20the=20table=20=F0=9F=90=9B=20fix(ApiKeysPage):=20fix=20typ?=
 =?UTF-8?q?o=20in=20ConfirmationModal=20titleHeader=20from=20'Delete=20Use?=
 =?UTF-8?q?r'=20to=20'Delete=20Key'=20=E2=9C=A8=20feat(ApiKeysPage):=20add?=
 =?UTF-8?q?=20onCloseModal=20callback=20to=20refresh=20keys=20after=20crea?=
 =?UTF-8?q?ting=20a=20new=20secret=20key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/pages/ApiKeysPage/index.tsx | 112 ++++++++++---------
 1 file changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx
index d91005191..37e148caa 100644
--- a/src/frontend/src/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/ApiKeysPage/index.tsx
@@ -129,6 +129,7 @@ export default function ApiKeysPage() {
                         }
                       >
                         <TableRow>
+                          <TableHead className="h-10">Id</TableHead>
                           <TableHead className="h-10">Name</TableHead>
                           <TableHead className="h-10">Key</TableHead>
                           <TableHead className="h-10">Created</TableHead>
@@ -148,57 +149,66 @@ export default function ApiKeysPage() {
                       </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.map(
+                            (api_keys: ApiKey, index: number) => (
+                              <TableRow key={index}>
+                                <TableCell className="truncate py-2">
+                                  <ShadTooltip content={api_keys.id}>
+                                    <span className="cursor-default">
+                                      {api_keys.id}
+                                    </span>
+                                  </ShadTooltip>
+                                </TableCell>
+                                <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) => {
-                                      handleDeleteKey(keys);
-                                    }}
-                                  >
-                                    <ShadTooltip content="Delete" side="top">
-                                      <IconComponent
-                                        name="Trash2"
-                                        className="ml-2 h-4 w-4 cursor-pointer"
-                                      />
-                                    </ShadTooltip>
-                                  </ConfirmationModal>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          ))}
+                                </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) => {
+                                        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>
@@ -212,7 +222,9 @@ export default function ApiKeysPage() {
                         confirmationText="Create secret key"
                         icon={"Key"}
                         data={userId}
-                        onCloseModal={() => {getKeys()}}
+                        onCloseModal={() => {
+                          getKeys();
+                        }}
                       >
                         <Button>
                           <IconComponent name="Plus" className="mr-1 h-5 w-5" />