New room list: add space menu in room header (#29352)

* feat(new room list): add space menu in view model

* test(new room list): add space menu in view model

* feat(new room list): add space menu in room list header

* chore: update i18n

* test(new room list): add tests for space menu

* test(new room list): update room list tests

* test(e2e): add tests for space menu

playwright/e2e/left-panel/room-list-view/room-list-header.spec.ts

@@ -47,12 +47,41 @@ test.describe("Header section of the room list", () => {
         await app.closeDialog();
     });
 
-    test("should render the header section for a space", async ({ page, app, user }) => {
+    test("should render the header section for a space", { tag: "@screenshot" }, async ({ page, app, user }) => {
         await app.client.createSpace({ name: "MySpace" });
         await page.getByRole("button", { name: "MySpace" }).click();
 
         const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader).toMatchScreenshot("room-list-space-header.png");
+
         await expect(roomListHeader.getByRole("heading", { name: "MySpace" })).toBeVisible();
         await expect(roomListHeader.getByRole("button", { name: "Add" })).toBeVisible();
+
+        const spaceMenu = roomListHeader.getByRole("button", { name: "Open space menu" });
+        await spaceMenu.click();
+
+        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-space-menu.png");
+
+        // It should open the space home
+        await page.getByRole("menuitem", { name: "Space home" }).click();
+        await expect(page.getByRole("main").getByRole("heading", { name: "MySpace" })).toBeVisible();
+
+        // It should open the invite dialog
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Invite" }).click();
+        await expect(page.getByRole("heading", { name: "Invite to MySpace" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should open the space preferences
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Preferences" }).click();
+        await expect(page.getByRole("heading", { name: "Preferences" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should open the space settings
+        await spaceMenu.click();
+        await page.getByRole("menuitem", { name: "Space Settings" }).click();
+        await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+        await app.closeDialog();
     });
 });

res/css/views/rooms/RoomListView/_RoomListHeaderView.pcss

@@ -17,4 +17,16 @@
     button {
         color: var(--cpd-color-icon-secondary);
     }
+
+    .mx_SpaceMenu_button {
+        svg {
+            transition: transform 0.1s linear;
+        }
+    }
+
+    .mx_SpaceMenu_button[aria-expanded="true"] {
+        svg {
+            transform: rotate(180deg);
+        }
+    }
 }

src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useCallback } from "react";
-import { type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
+import { JoinRule, type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
 
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
@@ -23,7 +23,15 @@ import {
     UPDATE_SELECTED_SPACE,
 } from "../../../stores/spaces";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
-import { showCreateNewRoom } from "../../../utils/space";
+import {
+    shouldShowSpaceSettings,
+    showCreateNewRoom,
+    showSpaceInvite,
+    showSpacePreferences,
+    showSpaceSettings,
+} from "../../../utils/space";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 
 /**
  * Hook to get the active space and its title.
@@ -59,6 +67,11 @@ export interface RoomListHeaderViewState {
      * True if the user can create rooms
      */
     displayComposeMenu: boolean;
+    /**
+     * Whether to display the space menu
+     * True if there is an active space
+     */
+    displaySpaceMenu: boolean;
     /**
      * Whether the user can create rooms
      */
@@ -67,6 +80,14 @@ export interface RoomListHeaderViewState {
      * Whether the user can create video rooms
      */
     canCreateVideoRoom: boolean;
+    /**
+     * Whether the user can invite in the active space
+     */
+    canInviteInSpace: boolean;
+    /**
+     * Whether the user can access space settings
+     */
+    canAccessSpaceSettings: boolean;
     /**
      * Create a chat room
      * @param e - The click event
@@ -81,17 +102,39 @@ export interface RoomListHeaderViewState {
      * Create a video room
      */
     createVideoRoom: () => void;
+    /**
+     * Open the active space home
+     */
+    openSpaceHome: () => void;
+    /**
+     * Display the space invite dialog
+     */
+    inviteInSpace: () => void;
+    /**
+     * Open the space preferences
+     */
+    openSpacePreferences: () => void;
+    /**
+     * Open the space settings
+     */
+    openSpaceSettings: () => void;
 }
 
 /**
  * View model for the RoomListHeader.
  */
 export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
+    const matrixClient = useMatrixClientContext();
     const { activeSpace, title } = useSpace();
 
     const canCreateRoom = shouldShowComponent(UIComponent.CreateRooms);
     const canCreateVideoRoom = useFeatureEnabled("feature_video_rooms");
     const displayComposeMenu = canCreateRoom;
+    const displaySpaceMenu = Boolean(activeSpace);
+    const canInviteInSpace = Boolean(
+        activeSpace?.getJoinRule() === JoinRule.Public || activeSpace?.canInvite(matrixClient.getSafeUserId()),
+    );
+    const canAccessSpaceSettings = Boolean(activeSpace && shouldShowSpaceSettings(activeSpace));
 
     /* Actions */
 
@@ -125,13 +168,48 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
         }
     }, [activeSpace, elementCallVideoRoomsEnabled]);
 
+    const openSpaceHome = useCallback(() => {
+        // openSpaceHome is only available when there is an active space
+        if (!activeSpace) return;
+        defaultDispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: activeSpace.roomId,
+            metricsTrigger: undefined,
+        });
+    }, [activeSpace]);
+
+    const inviteInSpace = useCallback(() => {
+        // inviteInSpace is only available when there is an active space
+        if (!activeSpace) return;
+        showSpaceInvite(activeSpace);
+    }, [activeSpace]);
+
+    const openSpacePreferences = useCallback(() => {
+        // openSpacePreferences is only available when there is an active space
+        if (!activeSpace) return;
+        showSpacePreferences(activeSpace);
+    }, [activeSpace]);
+
+    const openSpaceSettings = useCallback(() => {
+        // openSpaceSettings is only available when there is an active space
+        if (!activeSpace) return;
+        showSpaceSettings(activeSpace);
+    }, [activeSpace]);
+
     return {
         title,
         displayComposeMenu,
+        displaySpaceMenu,
         canCreateRoom,
         canCreateVideoRoom,
+        canInviteInSpace,
+        canAccessSpaceSettings,
         createChatRoom,
         createRoom,
         createVideoRoom,
+        openSpaceHome,
+        inviteInSpace,
+        openSpacePreferences,
+        openSpaceSettings,
     };
 }

src/components/views/rooms/RoomListView/RoomListHeaderView.tsx

@@ -8,7 +8,11 @@ import React, { type JSX, useState } from "react";
 import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
 import ComposeIcon from "@vector-im/compound-design-tokens/assets/web/icons/compose";
 import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
+import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
+import HomeIcon from "@vector-im/compound-design-tokens/assets/web/icons/home";
+import PreferencesIcon from "@vector-im/compound-design-tokens/assets/web/icons/preferences";
+import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
 
 import { _t } from "../../../../languageHandler";
@@ -34,12 +38,57 @@ export function RoomListHeaderView(): JSX.Element {
             align="center"
             data-testid="room-list-header"
         >
-            <h1>{vm.title}</h1>
+            <Flex align="center" gap="var(--cpd-space-1x)">
+                <h1>{vm.title}</h1>
+                {vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
+            </Flex>
             {vm.displayComposeMenu && <ComposeMenu vm={vm} />}
         </Flex>
     );
 }
 
+interface SpaceMenuProps {
+    /**
+     * The view model for the room list header
+     */
+    vm: RoomListHeaderViewState;
+}
+
+/**
+ * The space menu for the room list header
+ */
+function SpaceMenu({ vm }: SpaceMenuProps): JSX.Element {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Menu
+            open={open}
+            onOpenChange={setOpen}
+            title={vm.title}
+            side="right"
+            align="start"
+            trigger={
+                <IconButton className="mx_SpaceMenu_button" aria-label={_t("room_list|open_space_menu")} size="20px">
+                    <ChevronDownIcon />
+                </IconButton>
+            }
+        >
+            <MenuItem Icon={HomeIcon} label={_t("room_list|space_menu|home")} onSelect={vm.openSpaceHome} />
+            {vm.canInviteInSpace && (
+                <MenuItem Icon={UserAddIcon} label={_t("action|invite")} onSelect={vm.inviteInSpace} />
+            )}
+            <MenuItem Icon={PreferencesIcon} label={_t("common|preferences")} onSelect={vm.openSpacePreferences} />
+            {vm.canAccessSpaceSettings && (
+                <MenuItem
+                    Icon={SettingsIcon}
+                    label={_t("room_list|space_menu|space_settings")}
+                    onSelect={vm.openSpaceSettings}
+                />
+            )}
+        </Menu>
+    );
+}
+
 interface ComposeMenuProps {
     /**
      * The view model for the room list header

src/i18n/strings/en_EN.json

@@ -2098,6 +2098,7 @@
             "other": "Currently joining %(count)s rooms"
         },
         "notification_options": "Notification options",
+        "open_space_menu": "Open space menu",
         "redacting_messages_status": {
             "one": "Currently removing messages in %(count)s room",
             "other": "Currently removing messages in %(count)s rooms"
@@ -2112,6 +2113,10 @@
         "sort_by_activity": "Activity",
         "sort_by_alphabet": "A-Z",
         "sort_unread_first": "Show rooms with unread messages first",
+        "space_menu": {
+            "home": "Space home",
+            "space_settings": "Space Settings"
+        },
         "space_menu_label": "%(spaceName)s menu",
         "sublist_options": "List options",
         "suggested_rooms_heading": "Suggested Rooms"

test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx

@@ -6,24 +6,34 @@
  */
 
 import { renderHook } from "jest-matrix-react";
-import { type MatrixClient, type Room, RoomType } from "matrix-js-sdk/src/matrix";
+import { JoinRule, type MatrixClient, type Room, RoomType } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 
 import { useRoomListHeaderViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel";
 import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
-import { mkStubRoom, stubClient } from "../../../../test-utils";
+import { mkStubRoom, stubClient, withClientContextRenderOptions } from "../../../../test-utils";
 import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
-import { showCreateNewRoom } from "../../../../../src/utils/space";
+import {
+    shouldShowSpaceSettings,
+    showCreateNewRoom,
+    showSpaceInvite,
+    showSpacePreferences,
+    showSpaceSettings,
+} from "../../../../../src/utils/space";
 
 jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({
     shouldShowComponent: jest.fn(),
 }));
 
 jest.mock("../../../../../src/utils/space", () => ({
+    shouldShowSpaceSettings: jest.fn(),
     showCreateNewRoom: jest.fn(),
+    showSpaceInvite: jest.fn(),
+    showSpacePreferences: jest.fn(),
+    showSpaceSettings: jest.fn(),
 }));
 
 describe("useRoomListHeaderViewModel", () => {
@@ -39,15 +49,19 @@ describe("useRoomListHeaderViewModel", () => {
         jest.resetAllMocks();
     });
 
+    function render() {
+        return renderHook(() => useRoomListHeaderViewModel(), withClientContextRenderOptions(matrixClient));
+    }
+
     describe("title", () => {
         it("should return Home as title", () => {
-            const { result } = renderHook(() => useRoomListHeaderViewModel());
+            const { result } = render();
             expect(result.current.title).toStrictEqual("Home");
         });
 
         it("should return the current space name as title", () => {
             jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
-            const { result } = renderHook(() => useRoomListHeaderViewModel());
+            const { result } = render();
 
             expect(result.current.title).toStrictEqual("spaceName");
         });
@@ -55,7 +69,7 @@ describe("useRoomListHeaderViewModel", () => {
 
     it("should be displayComposeMenu=true and canCreateRoom=true if the user can creates room", () => {
         mocked(shouldShowComponent).mockReturnValue(false);
-        const { result, rerender } = renderHook(() => useRoomListHeaderViewModel());
+        const { result, rerender } = render();
         expect(result.current.displayComposeMenu).toBe(false);
         expect(result.current.canCreateRoom).toBe(false);
 
@@ -65,15 +79,45 @@ describe("useRoomListHeaderViewModel", () => {
         expect(result.current.canCreateRoom).toBe(true);
     });
 
+    it("should be displaySpaceMenu=true if the user is in a space", () => {
+        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
+        const { result } = render();
+        expect(result.current.displaySpaceMenu).toBe(true);
+    });
+
+    it("should be canInviteInSpace=true if the space join rule is public", () => {
+        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
+        jest.spyOn(space, "getJoinRule").mockReturnValue(JoinRule.Public);
+
+        const { result } = render();
+        expect(result.current.displaySpaceMenu).toBe(true);
+    });
+
+    it("should be canInviteInSpace=true if the user has the right", () => {
+        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
+        jest.spyOn(space, "canInvite").mockReturnValue(true);
+
+        const { result } = render();
+        expect(result.current.displaySpaceMenu).toBe(true);
+    });
+
+    it("should be canAccessSpaceSettings=true if the user has the right", () => {
+        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
+        mocked(shouldShowSpaceSettings).mockReturnValue(true);
+
+        const { result } = render();
+        expect(result.current.canAccessSpaceSettings).toBe(true);
+    });
+
     it("should be canCreateVideoRoom=true if feature_video_rooms is enabled", () => {
         jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
-        const { result } = renderHook(() => useRoomListHeaderViewModel());
+        const { result } = render();
         expect(result.current.canCreateVideoRoom).toBe(true);
     });
 
     it("should fire Action.CreateChat when createChatRoom is called", () => {
         const spy = jest.spyOn(defaultDispatcher, "fire");
-        const { result } = renderHook(() => useRoomListHeaderViewModel());
+        const { result } = render();
         result.current.createChatRoom(new Event("click"));
 
         expect(spy).toHaveBeenCalledWith(Action.CreateChat);
@@ -81,7 +125,7 @@ describe("useRoomListHeaderViewModel", () => {
 
     it("should fire Action.CreateRoom when createRoom is called", () => {
         const spy = jest.spyOn(defaultDispatcher, "fire");
-        const { result } = renderHook(() => useRoomListHeaderViewModel());
+        const { result } = render();
         result.current.createRoom(new Event("click"));
 
         expect(spy).toHaveBeenCalledWith(Action.CreateRoom);
@@ -89,7 +133,7 @@ describe("useRoomListHeaderViewModel", () => {
 
     it("should call showCreateNewRoom when createRoom is called in a space", () => {
         jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
-        const { result } = renderHook(() => useRoomListHeaderViewModel());
+        const { result } = render();
         result.current.createRoom(new Event("click"));
 
         expect(showCreateNewRoom).toHaveBeenCalledWith(space);
@@ -98,7 +142,7 @@ describe("useRoomListHeaderViewModel", () => {
     it("should fire Action.CreateRoom with RoomType.UnstableCall when createVideoRoom is called and feature_element_call_video_rooms is enabled", () => {
         jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
         const spy = jest.spyOn(defaultDispatcher, "dispatch");
-        const { result } = renderHook(() => useRoomListHeaderViewModel());
+        const { result } = render();
         result.current.createVideoRoom();
 
         expect(spy).toHaveBeenCalledWith({ action: Action.CreateRoom, type: RoomType.UnstableCall });
@@ -107,7 +151,7 @@ describe("useRoomListHeaderViewModel", () => {
     it("should fire Action.CreateRoom with RoomType.ElementVideo when createVideoRoom is called and feature_element_call_video_rooms is disabled", () => {
         jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
         const spy = jest.spyOn(defaultDispatcher, "dispatch");
-        const { result } = renderHook(() => useRoomListHeaderViewModel());
+        const { result } = render();
         result.current.createVideoRoom();
 
         expect(spy).toHaveBeenCalledWith({ action: Action.CreateRoom, type: RoomType.ElementVideo });
@@ -115,9 +159,42 @@ describe("useRoomListHeaderViewModel", () => {
 
     it("should call showCreateNewRoom when createVideoRoom is called in a space", () => {
         jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
-        const { result } = renderHook(() => useRoomListHeaderViewModel());
+        const { result } = render();
         result.current.createVideoRoom();
 
         expect(showCreateNewRoom).toHaveBeenCalledWith(space, RoomType.ElementVideo);
     });
+
+    it("should fire Action.ViewRoom when openSpaceHome is called in a space", () => {
+        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
+        const spy = jest.spyOn(defaultDispatcher, "dispatch");
+        const { result } = render();
+        result.current.openSpaceHome();
+
+        expect(spy).toHaveBeenCalledWith({ action: Action.ViewRoom, room_id: space.roomId, metricsTrigger: undefined });
+    });
+
+    it("should call showSpaceInvite when inviteInSpace is called in a space", () => {
+        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
+        const { result } = render();
+        result.current.inviteInSpace();
+
+        expect(showSpaceInvite).toHaveBeenCalledWith(space);
+    });
+
+    it("should call showSpacePreferences when openSpacePreferences is called in a space", () => {
+        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
+        const { result } = render();
+        result.current.openSpacePreferences();
+
+        expect(showSpacePreferences).toHaveBeenCalledWith(space);
+    });
+
+    it("should call showSpaceSettings when openSpaceSettings is called in a space", () => {
+        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
+        const { result } = render();
+        result.current.openSpaceSettings();
+
+        expect(showSpaceSettings).toHaveBeenCalledWith(space);
+    });
 });

test/unit-tests/components/views/rooms/RoomListView/RoomListHeaderView-test.tsx

@@ -24,64 +24,129 @@ describe("<RoomListHeaderView />", () => {
     const defaultValue: RoomListHeaderViewState = {
         title: "title",
         displayComposeMenu: true,
+        displaySpaceMenu: true,
         canCreateRoom: true,
         canCreateVideoRoom: true,
+        canInviteInSpace: true,
+        canAccessSpaceSettings: true,
         createRoom: jest.fn(),
         createVideoRoom: jest.fn(),
         createChatRoom: jest.fn(),
+        openSpaceHome: jest.fn(),
+        inviteInSpace: jest.fn(),
+        openSpacePreferences: jest.fn(),
+        openSpaceSettings: jest.fn(),
     };
 
     afterEach(() => {
         jest.resetAllMocks();
     });
 
-    it("should display the compose menu", () => {
+    describe("compose menu", () => {
-        mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+        it("should display the compose menu", () => {
+            mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
 
-        const { asFragment } = render(<RoomListHeaderView />);
+            const { asFragment } = render(<RoomListHeaderView />);
-        expect(screen.queryByRole("button", { name: "Add" })).toBeInTheDocument();
+            expect(screen.queryByRole("button", { name: "Add" })).toBeInTheDocument();
-        expect(asFragment()).toMatchSnapshot();
+            expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should not display the compose menu", () => {
-        mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displayComposeMenu: false });
-
-        const { asFragment } = render(<RoomListHeaderView />);
-        expect(screen.queryByRole("button", { name: "Add" })).toBeNull();
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should display all the buttons when the menu is opened", async () => {
-        const user = userEvent.setup();
-        mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
-        render(<RoomListHeaderView />);
-        const openMenu = screen.getByRole("button", { name: "Add" });
-        await user.click(openMenu);
-
-        await user.click(screen.getByRole("menuitem", { name: "New message" }));
-        expect(defaultValue.createChatRoom).toHaveBeenCalled();
-
-        await user.click(openMenu);
-        await user.click(screen.getByRole("menuitem", { name: "New room" }));
-        expect(defaultValue.createRoom).toHaveBeenCalled();
-
-        await user.click(openMenu);
-        await user.click(screen.getByRole("menuitem", { name: "New video room" }));
-        expect(defaultValue.createVideoRoom).toHaveBeenCalled();
-    });
-
-    it("should display only the new message button", async () => {
-        const user = userEvent.setup();
-        mocked(useRoomListHeaderViewModel).mockReturnValue({
-            ...defaultValue,
-            canCreateRoom: false,
-            canCreateVideoRoom: false,
         });
 
-        render(<RoomListHeaderView />);
+        it("should not display the compose menu", () => {
-        await user.click(screen.getByRole("button", { name: "Add" }));
+            mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displayComposeMenu: false });
 
-        expect(screen.queryByRole("menuitem", { name: "New room" })).toBeNull();
+            const { asFragment } = render(<RoomListHeaderView />);
-        expect(screen.queryByRole("menuitem", { name: "New video room" })).toBeNull();
+            expect(screen.queryByRole("button", { name: "Add" })).toBeNull();
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        it("should display all the buttons when the menu is opened", async () => {
+            const user = userEvent.setup();
+            mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+            render(<RoomListHeaderView />);
+            const openMenu = screen.getByRole("button", { name: "Add" });
+            await user.click(openMenu);
+
+            await user.click(screen.getByRole("menuitem", { name: "New message" }));
+            expect(defaultValue.createChatRoom).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "New room" }));
+            expect(defaultValue.createRoom).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "New video room" }));
+            expect(defaultValue.createVideoRoom).toHaveBeenCalled();
+        });
+
+        it("should display only the new message button", async () => {
+            const user = userEvent.setup();
+            mocked(useRoomListHeaderViewModel).mockReturnValue({
+                ...defaultValue,
+                canCreateRoom: false,
+                canCreateVideoRoom: false,
+            });
+
+            render(<RoomListHeaderView />);
+            await user.click(screen.getByRole("button", { name: "Add" }));
+
+            expect(screen.queryByRole("menuitem", { name: "New room" })).toBeNull();
+            expect(screen.queryByRole("menuitem", { name: "New video room" })).toBeNull();
+        });
+    });
+
+    describe("space menu", () => {
+        it("should display the space menu", () => {
+            mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+
+            const { asFragment } = render(<RoomListHeaderView />);
+            expect(screen.queryByRole("button", { name: "Open space menu" })).toBeInTheDocument();
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        it("should not display the space menu", () => {
+            mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displaySpaceMenu: false });
+
+            const { asFragment } = render(<RoomListHeaderView />);
+            expect(screen.queryByRole("button", { name: "Open space menu" })).toBeNull();
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        it("should display all the buttons when the space menu is opened", async () => {
+            const user = userEvent.setup();
+            mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+            render(<RoomListHeaderView />);
+            const openMenu = screen.getByRole("button", { name: "Open space menu" });
+            await user.click(openMenu);
+
+            await user.click(screen.getByRole("menuitem", { name: "Space home" }));
+            expect(defaultValue.openSpaceHome).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "Invite" }));
+            expect(defaultValue.inviteInSpace).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "Preferences" }));
+            expect(defaultValue.openSpacePreferences).toHaveBeenCalled();
+
+            await user.click(openMenu);
+            await user.click(screen.getByRole("menuitem", { name: "Space Settings" }));
+            expect(defaultValue.openSpaceSettings).toHaveBeenCalled();
+        });
+
+        it("should display only the home and preference buttons", async () => {
+            const user = userEvent.setup();
+            mocked(useRoomListHeaderViewModel).mockReturnValue({
+                ...defaultValue,
+                canInviteInSpace: false,
+                canAccessSpaceSettings: false,
+            });
+
+            render(<RoomListHeaderView />);
+            await user.click(screen.getByRole("button", { name: "Add" }));
+
+            expect(screen.queryByRole("menuitem", { name: "Invite" })).toBeNull();
+            expect(screen.queryByRole("menuitem", { name: "Space Setting" })).toBeNull();
+        });
     });
 });

test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListHeaderView-test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
+exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`] = `
 <DocumentFragment>
   <header
     aria-label="Room options"
@@ -8,9 +8,44 @@ exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
   >
-    <h1>
+    <div
-      title
+      class="mx_Flex"
-    </h1>
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+    >
+      <h1>
+        title
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Open space menu"
+        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        data-state="closed"
+        id="radix-:r0:"
+        role="button"
+        style="--cpd-icon-button-size: 20px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
     <button
       aria-disabled="false"
       aria-expanded="false"
@@ -18,7 +53,7 @@ exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
       aria-label="Add"
       class="_icon-button_m2erp_8"
       data-state="closed"
-      id="radix-:r0:"
+      id="radix-:r2:"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
@@ -50,7 +85,7 @@ exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomListHeaderView /> should not display the compose menu 1`] = `
+exports[`<RoomListHeaderView /> compose menu should not display the compose menu 1`] = `
 <DocumentFragment>
   <header
     aria-label="Room options"
@@ -58,9 +93,184 @@ exports[`<RoomListHeaderView /> should not display the compose menu 1`] = `
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
   >
-    <h1>
+    <div
-      title
+      class="mx_Flex"
-    </h1>
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+    >
+      <h1>
+        title
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Open space menu"
+        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        data-state="closed"
+        id="radix-:r4:"
+        role="button"
+        style="--cpd-icon-button-size: 20px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </header>
+</DocumentFragment>
+`;
+
+exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
+<DocumentFragment>
+  <header
+    aria-label="Room options"
+    class="mx_Flex mx_RoomListHeaderView"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+  >
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+    >
+      <h1>
+        title
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Open space menu"
+        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        data-state="closed"
+        id="radix-:rs:"
+        role="button"
+        style="--cpd-icon-button-size: 20px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="Add"
+      class="_icon-button_m2erp_8"
+      data-state="closed"
+      id="radix-:ru:"
+      role="button"
+      style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="_indicator-icon_zr2a0_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          />
+        </svg>
+      </div>
+    </button>
+  </header>
+</DocumentFragment>
+`;
+
+exports[`<RoomListHeaderView /> space menu should not display the space menu 1`] = `
+<DocumentFragment>
+  <header
+    aria-label="Room options"
+    class="mx_Flex mx_RoomListHeaderView"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+  >
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+    >
+      <h1>
+        title
+      </h1>
+    </div>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="Add"
+      class="_icon-button_m2erp_8"
+      data-state="closed"
+      id="radix-:r10:"
+      role="button"
+      style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="_indicator-icon_zr2a0_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          />
+        </svg>
+      </div>
+    </button>
   </header>
 </DocumentFragment>
 `;

test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap

@@ -12,9 +12,14 @@ exports[`<RoomListView /> should not render the RoomListSearch component when UI
       data-testid="room-list-header"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
     >
-      <h1>
+      <div
-        Home
+        class="mx_Flex"
-      </h1>
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+      >
+        <h1>
+          Home
+        </h1>
+      </div>
     </header>
   </section>
 </DocumentFragment>
@@ -88,9 +93,14 @@ exports[`<RoomListView /> should render the RoomListSearch component when UIComp
       data-testid="room-list-header"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
     >
-      <h1>
+      <div
-        Home
+        class="mx_Flex"
-      </h1>
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+      >
+        <h1>
+          Home
+        </h1>
+      </div>
       <button
         aria-disabled="false"
         aria-expanded="false"