From f035ce2a258c7225f8f435ee36746bc6501aedc4 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 10 Apr 2025 08:15:27 +0200
Subject: [PATCH] Improve signout button

---
 justfile                                 |  3 ++
 ui/src/components/NavigationBar.tsx      |  3 +-
 ui/src/components/SignOutButton.test.tsx |  2 +-
 ui/src/components/SignOutButton.tsx      | 53 +++++++++++++++++++++++-
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/justfile b/justfile
index ccf0bfe..f967f36 100644
--- a/justfile
+++ b/justfile
@@ -3,6 +3,9 @@ _frontend-dev:
 	
 test-frontend:
 	cd ui && pnpm run test
+	
+test-frontend-watch:
+	cd ui && pnpm run test:watch
 
 typecheck:
 	cd ui && tsc -b
diff --git a/ui/src/components/NavigationBar.tsx b/ui/src/components/NavigationBar.tsx
index b1a46ec..72c3108 100644
--- a/ui/src/components/NavigationBar.tsx
+++ b/ui/src/components/NavigationBar.tsx
@@ -31,6 +31,7 @@ import logo from "../assets/icon.jpg";
 import { ThemeSwitcher } from "./ThemeSwitcher";
 import { useSession } from "../contexts/SessionContext";
 import { Text } from "@ui/ui-library/text";
+import { SignOutButton } from "./SignOutButton";
 
 type NavLinkItem = {
   isActive?: boolean;
@@ -137,7 +138,7 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
                 <Text className="font-bold text-gray-300/90">
                   {session?.user?.user_metadata?.full_name}
                 </Text>
-                <Text className="text-gray-300/90">Admin</Text>
+                <SignOutButton />
               </div>
             </div>
 
diff --git a/ui/src/components/SignOutButton.test.tsx b/ui/src/components/SignOutButton.test.tsx
index f56ee3c..1dd13f6 100644
--- a/ui/src/components/SignOutButton.test.tsx
+++ b/ui/src/components/SignOutButton.test.tsx
@@ -45,7 +45,7 @@ describe("SignOutButton", () => {
     renderWithRouter(<SignOutButton />);
 
     // Click the button
-    fireEvent.click(screen.getByRole("button", { name: /se déconnecter/i }));
+    fireEvent.click(screen.getByRole("button", { name: /Déconnexion/i }));
 
     // Check if logout was called
     expect(mockLogout).toHaveBeenCalled();
diff --git a/ui/src/components/SignOutButton.tsx b/ui/src/components/SignOutButton.tsx
index 058ee9f..b6df5d4 100644
--- a/ui/src/components/SignOutButton.tsx
+++ b/ui/src/components/SignOutButton.tsx
@@ -1,7 +1,56 @@
 import { Button } from "../ui-library/button";
 import { useLogout } from "../hooks/auth";
+import { LogOutIcon } from "lucide-react";
 
 export const SignOutButton = () => {
-  const { mutate: logout } = useLogout();
-  return <Button onPress={() => logout()}>Se déconnecter</Button>;
+  const { mutate: logout, isPending } = useLogout();
+
+  return (
+    <div
+      className={`
+        relative
+        inline-block
+        transition-all
+        duration-200
+        ease-in-out
+        hover:scale-[1.02]
+        active:scale-95
+      `}
+    >
+      <Button
+        onPress={() => logout()}
+        variant="outline"
+        color="destructive"
+        size="sm"
+        className={`
+          relative
+          overflow-hidden
+          border-0
+          py-2
+          px-0
+          transition-all
+          duration-200
+          ease-in-out
+          hover:bg-destructive/10
+          hover:text-destructive
+          ${isPending ? "opacity-70 cursor-not-allowed" : ""}
+        `}
+        isDisabled={isPending}
+      >
+        <div className="flex items-center gap-2">
+          <LogOutIcon
+            className={`
+              transition-transform
+              duration-200
+              "hover:translate-x-[-2px]"
+              ${isPending ? "animate-spin" : ""}
+            `}
+            size={16}
+          />
+          <span className="font-medium">Déconnexion</span>
+        </div>
+        {isPending && <div className="absolute inset-0 bg-destructive/5" />}
+      </Button>
+    </div>
+  );
 };