Merge pull request #504 from linagora/UI/update-header-bar

UI/update header bar

Author: lenhanphung

__test__/components/EventModifications.test.tsx

@@ -400,6 +400,10 @@ describe("CalendarApp integration", () => {
         preloadedState
       );
 
+      // Expand to show date/time inputs (normal mode shows DateTimeSummary)
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
       const startDateInput = await screen.findByTestId("start-time-input");
 
       await act(async () => {

__test__/components/Menubar.test.tsx

@@ -1,9 +1,14 @@
 import { Menubar } from "@/components/Menubar/Menubar";
 import * as oidcAuth from "@/features/User/oidcAuth";
+import { redirectTo } from "@/utils/navigation";
 import "@testing-library/jest-dom";
 import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "../utils/Renderwithproviders";
 
+jest.mock("@/utils/navigation", () => ({
+  redirectTo: jest.fn(),
+}));
+
 describe("Calendar App Component Display Tests", () => {
   const preloadedState = {
     user: {
@@ -320,7 +325,7 @@ describe("Calendar App Component Display Tests", () => {
     expect(avatar).toBeInTheDocument();
   });
 
-  it("shows AppsIcon when applist is not empty", () => {
+  it("shows apps button when applist is not empty", () => {
     (window as any).appList = [{ name: "test", icon: "test", link: "test" }];
     const mockCalendarRef = { current: null };
     const mockOnRefresh = jest.fn();
@@ -335,10 +340,10 @@ describe("Calendar App Component Display Tests", () => {
       />,
       preloadedState
     );
-    expect(screen.getByTestId("AppsIcon")).toBeInTheDocument();
+    expect(screen.getByLabelText("menubar.apps")).toBeInTheDocument();
   });
 
-  it("opens popover when clicking AppsIcon", () => {
+  it("opens popover when clicking apps button", () => {
     (window as any).appList = [
       { name: "Twake", icon: "twake.svg", link: "/twake" },
       { name: "Calendar", icon: "calendar.svg", link: "/calendar" },
@@ -356,7 +361,7 @@ describe("Calendar App Component Display Tests", () => {
       />,
       preloadedState
     );
-    const appsButton = screen.getByTestId("AppsIcon");
+    const appsButton = screen.getByLabelText("menubar.apps");
     fireEvent.click(appsButton);
     expect(screen.getByText("Twake")).toBeInTheDocument();
     expect(screen.getByText("Calendar")).toBeInTheDocument();
@@ -377,7 +382,7 @@ describe("Calendar App Component Display Tests", () => {
       />,
       preloadedState
     );
-    const appsButton = screen.getByTestId("AppsIcon");
+    const appsButton = screen.getByLabelText("menubar.apps");
     fireEvent.click(appsButton);
 
     const testLink = screen.getByRole("link", { name: /test/i });
@@ -532,7 +537,7 @@ describe("Menubar interaction with expanded Dialog", () => {
       preloadedState
     );
 
-    const appsButton = screen.getByTestId("AppsIcon");
+    const appsButton = screen.getByLabelText("menubar.apps");
     expect(appsButton).toBeVisible();
 
     fireEvent.click(appsButton);
@@ -717,10 +722,17 @@ describe("Menubar interaction with expanded Dialog", () => {
 });
 
 describe("Menubar logout flow", () => {
+  const redirectToMock = redirectTo as jest.Mock;
+
   beforeEach(() => {
     localStorage.clear();
     sessionStorage.clear();
     jest.clearAllMocks();
+    redirectToMock.mockReset();
+  });
+
+  afterEach(() => {
+    redirectToMock.mockReset();
   });
 
   function renderMenubar(user = { name: "John", email: "test@example.com" }) {
@@ -756,6 +768,7 @@ describe("Menubar logout flow", () => {
       fireEvent.click(screen.getByText("menubar.logout"));
     });
     expect(logoutSpy).toHaveBeenCalled();
+    expect(redirectToMock).toHaveBeenCalledWith("https://logout.url/");
 
     expect(sessionStorage.length).toBe(0);
   });

__test__/components/ResponsiveDialog.test.tsx

@@ -248,7 +248,7 @@ describe("ResponsiveDialog", () => {
         onClose={mockOnClose}
         title="Test"
         isExpanded={true}
-        headerHeight="100px"
+        headerHeight="70px"
       >
         <div>Custom Header Content</div>
       </ResponsiveDialog>

__test__/features/Events/EventDisplay.test.tsx

@@ -164,12 +164,12 @@ describe("Event Preview Display", () => {
     expect(screen.getByText(/January/i)).toBeInTheDocument();
     expect(screen.getByText(/15/)).toBeInTheDocument();
 
-    // Check time is displayed with exact values
-    // Format: "Wednesday, January 15, 2025 at 10:00 AM" and " – 10:00 AM" are in separate elements
+    // Check time is displayed in 24h format (no AM/PM)
+    // Format: "Wednesday, January 15, 2025 at 10:00" and " – 10:00" are in separate elements
     expect(
-      screen.getByText(/Wednesday, January 15, 2025 at 10:00 AM/)
+      screen.getByText(/Wednesday, January 15, 2025 at 10:00/)
     ).toBeInTheDocument();
-    expect(screen.getByText(/– 10:00 AM/)).toBeInTheDocument();
+    expect(screen.getByText(/– 10:00/)).toBeInTheDocument();
 
     expect(screen.getByText("Calendar")).toBeInTheDocument();
   });
@@ -1719,6 +1719,9 @@ describe("Event Full Display", () => {
 
     expect(screen.getByDisplayValue("Test Event")).toBeInTheDocument();
 
+    // Expand to show date/time inputs (normal mode shows DateTimeSummary)
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
+
     const startDateInput = screen.getByTestId("start-date-input");
     const startTimeInput = screen.getByTestId("start-time-input");
     const endTimeInput = screen.getByTestId("end-time-input");
@@ -1804,6 +1807,7 @@ describe("Event Full Display", () => {
       preloadedState
     );
 
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     const allDayCheckbox = screen.getByLabelText("event.form.allDay");
     fireEvent.click(allDayCheckbox);
     expect(allDayCheckbox).toBeChecked();
@@ -1878,6 +1882,7 @@ describe("Event Full Display", () => {
       )
     );
 
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     const calendarSelect = screen.getByLabelText("event.form.calendar");
     await act(async () => fireEvent.mouseDown(calendarSelect));
 
@@ -1947,9 +1952,9 @@ describe("Event Full Display", () => {
       stateWithTimezone
     );
 
+    // Expand to show timezone selector (normal mode hides it)
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     // The timezone select should have Asia/Bangkok selected
-    // Since the component uses formatLocalDateTime, the displayed time will be in local format
-    // but the timezone selector should show Asia/Bangkok
     const timeZone = screen.getByDisplayValue(/Asia\/Bangkok/i);
     expect(timeZone).toBeInTheDocument();
   });

__test__/features/Events/EventModal.test.tsx

@@ -124,8 +124,10 @@ describe("EventPopover", () => {
     });
     expect(addDescriptionButton).toBeInTheDocument();
 
-    const calendarSelect = screen.getByRole("combobox", { name: /calendar/i });
-    expect(calendarSelect).toBeInTheDocument();
+    // In normal mode calendar is a SectionPreviewRow (button), not combobox
+    expect(
+      screen.getByRole("button", { name: "Calendar 1" })
+    ).toBeInTheDocument();
 
     // Check button
     expect(
@@ -154,7 +156,8 @@ describe("EventPopover", () => {
       allDay: false,
     } as unknown as DateSelectArg);
 
-    // MUI DatePicker/TimePicker values are stored differently - just check elements exist
+    // Expand to show date/time inputs (normal mode shows DateTimeSummary)
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
     expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
   });
@@ -179,6 +182,10 @@ describe("EventPopover", () => {
       "Event Description"
     );
 
+    // Expand location section (normal mode shows SectionPreviewRow)
+    fireEvent.click(
+      screen.getByRole("button", { name: "event.form.locationPlaceholder" })
+    );
     fireEvent.change(screen.getByLabelText("event.form.location"), {
       target: { value: "Conference Room" },
     });
@@ -190,13 +197,14 @@ describe("EventPopover", () => {
   it("changes selected calendar", async () => {
     renderPopover();
 
+    // Expand to show calendar combobox (normal mode shows SectionPreviewRow)
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     const select = screen.getByLabelText("event.form.calendar");
     fireEvent.mouseDown(select); // Open menu
 
     const option = await screen.findByText("Calendar 2");
     fireEvent.click(option);
 
-    // Find the calendar combobox specifically by its aria-labelledby
     const calendarSelect = screen.getByRole("combobox", { name: /Calendar/i });
     expect(calendarSelect).toHaveTextContent("Calendar 2");
   });
@@ -290,6 +298,9 @@ describe("EventPopover", () => {
     fireEvent.change(screen.getByLabelText("event.form.description"), {
       target: { value: newEvent.description },
     });
+    fireEvent.click(
+      screen.getByRole("button", { name: "event.form.locationPlaceholder" })
+    );
     fireEvent.change(screen.getByLabelText("event.form.location"), {
       target: { value: newEvent.location },
     });
@@ -338,10 +349,11 @@ describe("EventPopover", () => {
 
   it("BUGFIX: Prefill Calendar field", async () => {
     renderPopover();
+    // In normal mode calendar is a SectionPreviewRow (button) with calendar name
     await waitFor(() =>
-      expect(screen.getByLabelText("event.form.calendar")).toHaveTextContent(
-        "Calendar 1"
-      )
+      expect(
+        screen.getByRole("button", { name: "Calendar 1" })
+      ).toHaveTextContent("Calendar 1")
     );
   });
 
@@ -357,6 +369,9 @@ describe("EventPopover", () => {
       } as unknown as DateSelectArg;
 
       renderPopover(selectedRange);
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
 
       const allDayCheckbox = screen.getByLabelText("event.form.allDay");
       await waitFor(() => {
@@ -375,6 +390,9 @@ describe("EventPopover", () => {
       } as unknown as DateSelectArg;
 
       renderPopover(selectedRange);
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
 
       const allDayCheckbox = screen.getByLabelText("event.form.allDay");
       await waitFor(() => {
@@ -403,6 +421,9 @@ describe("EventPopover", () => {
       } as unknown as DateSelectArg;
 
       renderPopover(selectedRange);
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
 
       const allDayCheckbox = screen.getByLabelText("event.form.allDay");
       await waitFor(() => {
@@ -427,6 +448,9 @@ describe("EventPopover", () => {
       } as unknown as DateSelectArg;
 
       renderPopover(selectedRange);
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
 
       const allDayCheckbox = screen.getByLabelText("event.form.allDay");
       await waitFor(() => {
@@ -451,6 +475,9 @@ describe("EventPopover", () => {
       } as unknown as DateSelectArg;
 
       renderPopover(selectedRange);
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
 
       const allDayCheckbox = screen.getByLabelText("event.form.allDay");
       await waitFor(() => {

__test__/features/Events/EventRepetition.test.tsx

@@ -1176,7 +1176,8 @@ describe("Event URL handling for recurring events", () => {
       )
     );
 
-    // Change calendar
+    // Expand to show calendar combobox (normal mode shows SectionPreviewRow)
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     fireEvent.mouseDown(screen.getByLabelText("event.form.calendar"));
     const option = await screen.findByText("Calendar 2");
     fireEvent.click(option);

__test__/features/Events/EventUpdateModal.recurring.test.tsx

@@ -129,6 +129,10 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
         screen.queryByDisplayValue("Modified Instance Title")
       ).not.toBeInTheDocument();
 
+      // Expand more options to show timezone (normal mode shows summary first)
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
       // Verify timezone dropdown shows master timezone
       await waitFor(() => {
         expect(screen.getByDisplayValue(/New York/i)).toBeDefined();
@@ -493,8 +497,12 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
         expect(screen.getByDisplayValue("Daily Standup")).toBeInTheDocument();
       });
 
+      // Expand more options to show date/time inputs (normal mode shows DateTimeSummary first)
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
+      const input = await waitFor(() => screen.getByTestId("start-time-input"));
       // Change time to 2:00 PM (14:00)
-      const input = screen.getByTestId("start-time-input");
       await userEvent.click(input);
       await userEvent.clear(input);
       await userEvent.type(input, "14:00{enter}");

__test__/features/Events/EventUpdateModal.test.tsx

@@ -93,6 +93,9 @@ describe("EventUpdateModal Timezone Handling", () => {
     const titleInput = screen.getByDisplayValue("Timezone Event");
     expect(titleInput).toBeInTheDocument();
 
+    // Expand to show date/time inputs (normal mode shows DateTimeSummary)
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
+
     // Verify the start date and time inputs exist
     await waitFor(() => {
       const startDateInput = screen.getByTestId("start-date-input");
@@ -282,6 +285,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
       expect(mockGetMasterEvent).toHaveBeenCalled();
     });
 
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     // Wait for the repeat checkbox to be checked (indicating form is initialized)
     const repeatCheckbox = await waitFor(() => {
       const checkbox = screen.getByLabelText("event.form.repeat");
@@ -414,6 +418,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
       expect(screen.getByDisplayValue("Recurring Meeting")).toBeInTheDocument();
     });
 
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     // Wait for repeat checkbox to be checked
     const repeatCheckbox = await waitFor(() => {
       const checkbox = screen.getByLabelText("event.form.repeat");
@@ -546,6 +551,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
       expect(screen.getByDisplayValue("Recurring Meeting")).toBeInTheDocument();
     });
 
+    fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
     // Uncheck repeat and save
     const repeatCheckbox = screen.getByLabelText("event.form.repeat");
 

package-lock.json

@@ -12,7 +12,7 @@
     "@fullcalendar/moment-timezone": "^6.1.19",
     "@fullcalendar/react": "^6.1.17",
     "@fullcalendar/timegrid": "^6.1.17",
-    "@linagora/twake-mui": "1.1.4",
+    "@linagora/twake-mui": "1.1.8",
     "@lottiefiles/dotlottie-react": "^0.17.13",
     "@mui/icons-material": "^7.1.2",
     "@mui/material": "^7.1.2",