From 3e55e5f394b31c1758d332375d9ee8eb7937e44a Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 29 Aug 2023 11:46:48 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(headerComponent):=20change?=
 =?UTF-8?q?=20Sign=20out=20button=20to=20anchor=20tag=20for=20better=20acc?=
 =?UTF-8?q?essibility=20and=20consistency=20=E2=9C=A8=20feat(headerCompone?=
 =?UTF-8?q?nt):=20add=20Home=20link=20when=20on=20admin=20page=20for=20eas?=
 =?UTF-8?q?ier=20navigation=20=E2=9C=A8=20feat(headerComponent):=20add=20A?=
 =?UTF-8?q?dmin=20page=20link=20for=20easier=20navigation=20to=20admin=20p?=
 =?UTF-8?q?age=20=F0=9F=90=9B=20fix(ApiKeysPage):=20handle=20case=20when?=
 =?UTF-8?q?=20api=5Fkeys.name=20is=20null=20or=20undefined=20by=20displayi?=
 =?UTF-8?q?ng=20"-"=20instead=20=F0=9F=90=9B=20fix(ApiKeysPage):=20handle?=
 =?UTF-8?q?=20case=20when=20api=5Fkeys.last=5Fused=5Fat=20is=20an=20invali?=
 =?UTF-8?q?d=20date=20by=20displaying=20"Never"=20instead=20=E2=9C=A8=20fe?=
 =?UTF-8?q?at(ApiKeysPage):=20add=20Total=20Uses=20column=20to=20display?=
 =?UTF-8?q?=20the=20total=20number=20of=20uses=20for=20each=20API=20key=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(loginPage):=20set=20isAdmin=20context=20vari?=
 =?UTF-8?q?able=20based=20on=20user's=20is=5Fsuperuser=20property=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(loginPage):=20increase=20delay=20before=20fe?=
 =?UTF-8?q?tching=20logged=20user=20to=20500ms=20for=20better=20user=20exp?=
 =?UTF-8?q?erience=20=F0=9F=90=9B=20fix(types):=20add=20total=5Fuses=20pro?=
 =?UTF-8?q?perty=20to=20ApiKey=20type=20to=20match=20backend=20response?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/headerComponent/index.tsx  | 37 ++++++++------
 src/frontend/src/pages/ApiKeysPage/index.tsx  | 50 +++++++++++++++----
 src/frontend/src/pages/loginPage/index.tsx    |  6 ++-
 src/frontend/src/types/components/index.ts    |  1 +
 4 files changed, 67 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index b112cc743..c74cdaa76 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -32,29 +32,38 @@ export default function Header(): JSX.Element {
           <MenuBar flows={flows} tabId={tabId} />
         )}
         {!autoLogin && location.pathname !== `/flow/${tabId}` && (
-          <Button
+          <a
+          onClick={() => {
+            logout();
+            navigate("/login");
+          }}
+          className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer mx-5"
+        >
+          Sign out
+        </a>
+        )}
+
+        {location.pathname === "/admin" && (
+          <a
             onClick={() => {
-              logout();
-              navigate("/login");
+              navigate("/");
             }}
-            className="mx-5 cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
-            variant="outline"
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
           >
-            Sign out
-          </Button>
+            Home
+          </a>
         )}
 
         {isAdmin &&
           !autoLogin &&
           location.pathname !== "/admin" &&
           location.pathname !== `/flow/${tabId}` && (
-            <Button
-              className="cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
-              onClick={() => navigate("/admin")}
-              variant="outline"
-            >
-              Admin page
-            </Button>
+            <a
+            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
+            onClick={() => navigate("/admin")}
+          >
+            Admin page
+          </a>
           )}
       </div>
       <div className="round-button-div">
diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx
index 48e8574c8..d1c91593a 100644
--- a/src/frontend/src/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/ApiKeysPage/index.tsx
@@ -156,6 +156,7 @@ export default function ApiKeysPage() {
                                   </div>
                                 </ShadTooltip>
                               </TableHead>
+                              <TableHead className="h-10">Total Uses</TableHead>
                               <TableHead className="h-10 w-[100px]  text-right"></TableHead>
                             </TableRow>
                           </TableHeader>
@@ -167,7 +168,7 @@ export default function ApiKeysPage() {
                                     <TableCell className="truncate py-2">
                                       <ShadTooltip content={api_keys.name}>
                                         <span className="cursor-default">
-                                          {api_keys.name}
+                                          {api_keys.name ? api_keys.name : "-"}
                                         </span>
                                       </ShadTooltip>
                                     </TableCell>
@@ -177,18 +178,45 @@ export default function ApiKeysPage() {
                                       </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"
-                                      ) === "Invalid date"
-                                        ? "Never"
-                                        : moment(api_keys.last_used_at).format(
+                                      <ShadTooltip
+                                        side="top"
+                                        content={moment(
+                                          api_keys.created_at
+                                        ).format("YYYY-MM-DD HH:mm")}
+                                      >
+                                        <div>
+                                          {moment(api_keys.created_at).format(
                                             "YYYY-MM-DD HH:mm"
                                           )}
+                                        </div>
+                                      </ShadTooltip>
+                                    </TableCell>
+                                    <TableCell className="truncate py-2">
+                                      <ShadTooltip
+                                        side="top"
+                                        content={
+                                          moment(api_keys.last_used_at).format(
+                                            "YYYY-MM-DD HH:mm"
+                                          ) === "Invalid date"
+                                            ? "Never"
+                                            : moment(
+                                                api_keys.last_used_at
+                                              ).format("YYYY-MM-DD HH:mm")
+                                        }
+                                      >
+                                        <div>
+                                          {moment(api_keys.last_used_at).format(
+                                            "YYYY-MM-DD HH:mm"
+                                          ) === "Invalid date"
+                                            ? "Never"
+                                            : moment(
+                                                api_keys.last_used_at
+                                              ).format("YYYY-MM-DD HH:mm")}
+                                        </div>
+                                      </ShadTooltip>
+                                    </TableCell>
+                                    <TableCell className="truncate py-2">
+                                      {api_keys.total_uses}
                                     </TableCell>
                                     <TableCell className="flex w-[100px] py-2 text-right">
                                       <div className="flex">
diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx
index 5fcbe366f..14e04708b 100644
--- a/src/frontend/src/pages/loginPage/index.tsx
+++ b/src/frontend/src/pages/loginPage/index.tsx
@@ -19,7 +19,7 @@ export default function LoginPage(): JSX.Element {
     useState<loginInputStateType>(CONTROL_LOGIN_STATE);
 
   const { password, username } = inputState;
-  const { login, getAuthentication, setUserData } = useContext(AuthContext);
+  const { login, getAuthentication, setUserData, setIsAdmin } = useContext(AuthContext);
   const navigate = useNavigate();
   const { setErrorData } = useContext(alertContext);
 
@@ -53,10 +53,12 @@ export default function LoginPage(): JSX.Element {
       setTimeout(() => {
         getLoggedUser()
           .then((user) => {
+            const isSuperUser = user.is_superuser;
+            setIsAdmin(isSuperUser);
             setUserData(user);
           })
           .catch((error) => {});
-      }, 1000);
+      }, 500);
     }
   }
 
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 9a0108e70..3f8096618 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -538,6 +538,7 @@ export type ApiKey = {
   name: string;
   created_at: string;
   last_used_at: string;
+  total_uses: number;
 };
 export type fetchErrorComponentType = {
   message: string;