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

Author: florianduros

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();
     });
 });

playwright/snapshots/left-panel/room-list-view/room-list-header.spec.ts/room-list-header-space-menu-linux.png

@@ -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);
+        }
+    }
 }

playwright/snapshots/left-panel/room-list-view/room-list-header.spec.ts/room-list-space-header-linux.png

@@ -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,
     };
 }

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

@@ -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/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx

@@ -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"