From 8a682800234b2c6b4447825b5c0607049c1bac23 Mon Sep 17 00:00:00 2001
From: Camille Moussu <66134347+Eriikah@users.noreply.github.com>
Date: Tue, 2 Dec 2025 10:07:41 +0100
Subject: [PATCH] [#336] added logout logic to user menu (#380)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>
---
 __test__/components/Menubar.test.tsx | 48 +++++++++++++++++++++++++++-
 src/components/Menubar/Menubar.tsx   | 11 ++++---
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/__test__/components/Menubar.test.tsx b/__test__/components/Menubar.test.tsx
index 437e4a9..429110c 100644
--- a/__test__/components/Menubar.test.tsx
+++ b/__test__/components/Menubar.test.tsx
@@ -1,7 +1,8 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { Menubar } from "../../src/components/Menubar/Menubar";
 import { renderWithProviders } from "../utils/Renderwithproviders";
+import * as oidcAuth from "../../src/features/User/oidcAuth";
 
 describe("Calendar App Component Display Tests", () => {
   const preloadedState = {
@@ -714,3 +715,48 @@ describe("Menubar interaction with expanded Dialog", () => {
     expect(container.querySelector(".select-display")).toBeInTheDocument();
   });
 });
+
+describe("Menubar logout flow", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    sessionStorage.clear();
+    jest.clearAllMocks();
+  });
+
+  function renderMenubar(user = { name: "John", email: "test@example.com" }) {
+    const preloadedState = {
+      user: { userData: user },
+      settings: { view: "calendar" },
+    };
+
+    return renderWithProviders(
+      <Menubar
+        calendarRef={{ current: null }}
+        onRefresh={() => {}}
+        currentDate={new Date()}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+  }
+
+  it("clears storage before redirecting", async () => {
+    sessionStorage.setItem("tokenSet", "dummy");
+    const logoutSpy = jest
+      .spyOn(oidcAuth, "Logout")
+      .mockResolvedValue(new URL("https://logout.url"));
+
+    await act(async () => {
+      renderMenubar();
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("menubar.userProfile"));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByText("menubar.logout"));
+    });
+    expect(logoutSpy).toHaveBeenCalled();
+
+    expect(sessionStorage.length).toBe(0);
+  });
+});
diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx
index 90d5853..ef2bf55 100644
--- a/src/components/Menubar/Menubar.tsx
+++ b/src/components/Menubar/Menubar.tsx
@@ -36,6 +36,7 @@ import {
   vi as viLocale,
 } from "date-fns/locale";
 import SearchBar from "./EventSearchBar";
+import { Logout } from "../../features/User/oidcAuth";
 const dateLocales = { en: enGB, fr: frLocale, ru: ruLocale, vi: viLocale };
 
 export type AppIconProps = {
@@ -143,8 +144,10 @@ export function Menubar({
     handleUserMenuClose();
   };
 
-  const handleLogoutClick = () => {
-    // TODO: Implement logout functionality
+  const handleLogoutClick = async () => {
+    const logoutUrl = await Logout();
+    sessionStorage.removeItem("tokenSet");
+    window.location.assign(logoutUrl.href);
     handleUserMenuClose();
   };
 
@@ -344,11 +347,11 @@ export function Menubar({
           <SettingsIcon sx={{ mr: 2 }} />
           {t("menubar.settings") || "Settings"}
         </MenuItem>
-        {/* <Divider />
+        <Divider />
         <MenuItem onClick={handleLogoutClick} sx={{ py: 1.5 }}>
           <LogoutIcon sx={{ mr: 2 }} />
           {t("menubar.logout") || "Logout"}
-        </MenuItem> */}
+        </MenuItem>
       </Menu>
     </>
   );