[#179] functionnal topbar when dialog expanded (#292)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

__test__/components/Menubar.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { Menubar } from "../../src/components/Menubar/Menubar";
 import { renderWithProviders } from "../utils/Renderwithproviders";
@@ -383,3 +383,236 @@ describe("Calendar App Component Display Tests", () => {
     expect(testLink).toHaveAttribute("href", "test");
   });
 });
+
+describe("Menubar interaction with expanded Dialog", () => {
+  const preloadedState = {
+    user: {
+      userData: {
+        sub: "test",
+        email: "test@test.com",
+        family_name: "Doe",
+        name: "John",
+        sid: "mockSid",
+        openpaasId: "667037022b752d0026472254",
+      },
+    },
+    settings: {
+      language: "en",
+    },
+  };
+
+  beforeEach(() => {
+    (window as any).appList = [
+      { name: "Twake", link: "/twake", icon: "twake.svg" },
+      { name: "Calendar", link: "/calendar", icon: "calendar.svg" },
+    ];
+  });
+
+  afterEach(() => {
+    document.body.classList.remove("dialog-expanded");
+  });
+
+  it("has navigation controls element with correct class", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const navigationControls = container.querySelector(".navigation-controls");
+    expect(navigationControls).toBeInTheDocument();
+    expect(navigationControls).toHaveClass("navigation-controls");
+  });
+
+  it("has current date time element with correct class", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const dateTimeDisplay = container.querySelector(".current-date-time");
+    expect(dateTimeDisplay).toBeInTheDocument();
+    expect(dateTimeDisplay).toHaveClass("current-date-time");
+  });
+
+  it("has refresh button element with correct class", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const refreshButton = container.querySelector(".refresh-button");
+    expect(refreshButton).toBeInTheDocument();
+    expect(refreshButton).toHaveClass("refresh-button");
+  });
+
+  it("has view selector element with correct class", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const selectDisplay = container.querySelector(".select-display");
+    expect(selectDisplay).toBeInTheDocument();
+    expect(selectDisplay).toHaveClass("select-display");
+  });
+
+  it("keeps logo visible when dialog is expanded", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    document.body.classList.add("dialog-expanded");
+
+    renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const logoElement = screen.getByAltText("menubar.logoAlt");
+    expect(logoElement).toBeInTheDocument();
+    expect(logoElement).toBeVisible();
+  });
+
+  it("keeps apps icon clickable when dialog is expanded", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    document.body.classList.add("dialog-expanded");
+
+    renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const appsButton = screen.getByTestId("AppsIcon");
+    expect(appsButton).toBeVisible();
+
+    fireEvent.click(appsButton);
+    expect(screen.getByText("Twake")).toBeInTheDocument();
+  });
+
+  it("keeps avatar clickable when dialog is expanded", async () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    document.body.classList.add("dialog-expanded");
+
+    renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const avatar = screen.getByText("JD");
+    expect(avatar).toBeVisible();
+
+    fireEvent.click(avatar.closest("button")!);
+
+    await waitFor(() => {
+      const languageSelector = screen.getByLabelText(
+        "menubar.languageSelector"
+      );
+      expect(languageSelector).toBeInTheDocument();
+    });
+  });
+
+  it("shows all elements in normal mode (not expanded)", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const navigationControls = container.querySelector(".navigation-controls");
+    const dateTimeDisplay = container.querySelector(".current-date-time");
+    const refreshButton = container.querySelector(".refresh-button");
+    const selectDisplay = container.querySelector(".select-display");
+
+    expect(navigationControls).toBeVisible();
+    expect(dateTimeDisplay).toBeVisible();
+    expect(refreshButton).toBeVisible();
+    expect(selectDisplay).toBeVisible();
+  });
+
+  it("verifies CSS classes are correctly applied to elements", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    expect(container.querySelector(".menubar")).toBeInTheDocument();
+    expect(container.querySelector(".navigation-controls")).toBeInTheDocument();
+    expect(container.querySelector(".current-date-time")).toBeInTheDocument();
+    expect(container.querySelector(".refresh-button")).toBeInTheDocument();
+    expect(container.querySelector(".select-display")).toBeInTheDocument();
+  });
+});

__test__/utils/Renderwithproviders.tsx

@@ -36,6 +36,7 @@ export function renderWithProviders(
             return key;
           },
           f: (date: Date, formatStr: string) => date.toString(),
+          lang: "en",
         }}
       >
         <MemoryRouter initialEntries={["/"]}>

jest.config.ts

@@ -26,7 +26,8 @@ const config: Config = {
       transform: {
         "^.+\\.tsx?$": ["ts-jest", { tsconfig: "tsconfig.json" }],
         "^.+\\.(js|jsx|mjs)$": "babel-jest",
-        "^.+\\.(css|scss|sass|less)$": "jest-preview/transforms/css",
+        "^.+\\.(css|scss|sass|less|styl|stylus)$":
+          "jest-preview/transforms/css",
         "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":
           "jest-preview/transforms/file",
         "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":

src/components/Dialog/ResponsiveDialog.tsx

@@ -116,6 +116,7 @@ function ResponsiveDialog({
     "& .MuiBackdrop-root": {
       opacity: isExpanded ? "0 !important" : undefined,
       transition: isExpanded ? "none !important" : undefined,
+      pointerEvents: isExpanded ? "none" : undefined,
     },
     "& .MuiDialog-paper": {
       maxWidth: isExpanded ? "100%" : normalMaxWidth,
@@ -124,6 +125,7 @@ function ResponsiveDialog({
       margin: isExpanded ? `${headerHeight} 0 0 0` : "32px",
       boxShadow: isExpanded ? "none !important" : undefined,
       transition: isExpanded ? "none !important" : undefined,
+      zIndex: isExpanded ? 1200 : 1300,
     },
     "& .MuiDialogActions-root .MuiBox-root": {
       maxWidth: isExpanded ? expandedContentMaxWidth : undefined,
@@ -145,16 +147,35 @@ function ResponsiveDialog({
     width: "100%",
   };
 
+  React.useEffect(() => {
+    if (isExpanded) {
+      document.body.classList.add("dialog-expanded");
+    } else {
+      document.body.classList.remove("dialog-expanded");
+    }
+  }, [isExpanded]);
+
+  const handleClose = (
+    event: {},
+    reason: "backdropClick" | "escapeKeyDown"
+  ) => {
+    if (isExpanded && reason === "backdropClick") {
+      return;
+    }
+    onClose();
+  };
+
   const currentSpacing = isExpanded ? expandedSpacing : normalSpacing;
 
   return (
     <Dialog
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       maxWidth={false}
       fullWidth
       transitionDuration={isExpanded ? 0 : 300}
       sx={[baseSx, ...(Array.isArray(sx) ? sx : [sx])]}
+      style={isExpanded ? { zIndex: 1200 } : undefined}
       {...otherDialogProps}
     >
       <DialogTitle sx={titleSx} {...dialogTitleProps}>

src/components/Menubar/Menubar.styl

@@ -37,7 +37,7 @@
   align-items center
   padding 0.5rem
   width 100%
-  z-index 1000
+  z-index 1300
   height 80px
   background-color #fff
 
@@ -91,3 +91,9 @@
   display flex
   justify-content flex-end
   align-items center
+
+body.dialog-expanded .navigation-controls,
+body.dialog-expanded .current-date-time,
+body.dialog-expanded .refresh-button,
+body.dialog-expanded .select-display
+  display none

src/components/Menubar/Menubar.tsx

@@ -148,6 +148,7 @@ export function Menubar({
         <div className="right-menu">
           <div className="menu-items">
             <IconButton
+              className="refresh-button"
               onClick={onRefresh}
               aria-label={t("menubar.refresh")}
               title={t("menubar.refresh")}
@@ -159,6 +160,7 @@ export function Menubar({
             <FormControl
               size="small"
               style={{ minWidth: 120, marginRight: 16 }}
+              className="select-display"
             >
               <Select
                 value={currentView}