Video call meta space (#12297)

* add video room meta space button

Signed-off-by: Timo K <toger5@hotmail.de>

* Add videoRoomsSpace to meta space configuration

Signed-off-by: Timo K <toger5@hotmail.de>

* temp

Signed-off-by: Timo K <toger5@hotmail.de>

* dont show ppl section in video room space

Signed-off-by: Timo K <toger5@hotmail.de>

* add i18n strings

Signed-off-by: Timo K <toger5@hotmail.de>

* revert waitForIframe=false (this is part of another PR)

Signed-off-by: Timo K <toger5@hotmail.de>

* fix missing mock room method

Signed-off-by: Timo K <toger5@hotmail.de>

* test snapshot: add video room meta space

Signed-off-by: Timo K <toger5@hotmail.de>

* rename Conferences -> Conference

Signed-off-by: Timo K <toger5@hotmail.de>

* space panel snap test

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshot

Signed-off-by: Timo K <toger5@hotmail.de>

* fix test

Signed-off-by: Timo K <toger5@hotmail.de>

* add video room space tests

Signed-off-by: Timo K <toger5@hotmail.de>

* better logic

Signed-off-by: Timo K <toger5@hotmail.de>

* Add Video MetaSpace Test

Signed-off-by: Timo K <toger5@hotmail.de>

* make room join rule update reactive for the video room meta space

Signed-off-by: Timo K <toger5@hotmail.de>

* temp

Signed-off-by: Timo K <toger5@hotmail.de>

* fix description for meta space video room settings

Signed-off-by: Timo K <toger5@hotmail.de>

* tests

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshot

Signed-off-by: Timo K <toger5@hotmail.de>

* review

Signed-off-by: Timo K <toger5@hotmail.de>

* i18n

Signed-off-by: Timo K <toger5@hotmail.de>

* fix tests

Signed-off-by: Timo K <toger5@hotmail.de>

* put video meta space behind "feature_video_rooms" labs flag

Signed-off-by: Timo K <toger5@hotmail.de>

* review

Signed-off-by: Timo K <toger5@hotmail.de>

* update space store on RoomCreate state event

Signed-off-by: Timo K <toger5@hotmail.de>

* test for updating video room space on room type update

Signed-off-by: Timo K <toger5@hotmail.de>

* remove comment

Signed-off-by: Timo K <toger5@hotmail.de>

* also make knock join rule rooms part of the conference section

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>

res/css/structures/_SpacePanel.pcss

@@ -203,7 +203,8 @@ limitations under the License.
         &.mx_SpaceButton_home,
         &.mx_SpaceButton_favourites,
         &.mx_SpaceButton_people,
-        &.mx_SpaceButton_orphans {
+        &.mx_SpaceButton_orphans,
+        &.mx_SpaceButton_videoRooms {
             .mx_SpaceButton_icon {
                 background-color: $panel-actions;
 
@@ -229,6 +230,10 @@ limitations under the License.
             mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
         }
 
+        &.mx_SpaceButton_videoRooms .mx_SpaceButton_icon::before {
+            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
+        }
+
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
             &::before {
                 background-color: $primary-content;

src/components/views/rooms/RoomList.tsx

@@ -83,6 +83,7 @@ export const TAG_ORDER: TagID[] = [
     DefaultTagID.Invite,
     DefaultTagID.Favourite,
     DefaultTagID.DM,
+    DefaultTagID.Conference,
     DefaultTagID.Untagged,
     DefaultTagID.LowPriority,
     DefaultTagID.ServerNotice,
@@ -387,6 +388,11 @@ const TAG_AESTHETICS: TagAestheticsMap = {
         defaultHidden: false,
         AuxButtonComponent: DmAuxButton,
     },
+    [DefaultTagID.Conference]: {
+        sectionLabel: _td("voip|metaspace_video_rooms|conference_room_section"),
+        isInvite: false,
+        defaultHidden: false,
+    },
     [DefaultTagID.Untagged]: {
         sectionLabel: _td("common|rooms"),
         isInvite: false,
@@ -594,6 +600,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 (this.props.activeSpace === MetaSpace.Favourites && orderedTagId !== DefaultTagID.Favourite) ||
                 (this.props.activeSpace === MetaSpace.People && orderedTagId !== DefaultTagID.DM) ||
                 (this.props.activeSpace === MetaSpace.Orphans && orderedTagId === DefaultTagID.DM) ||
+                (this.props.activeSpace === MetaSpace.VideoRooms && orderedTagId === DefaultTagID.DM) ||
                 (!isMetaSpace(this.props.activeSpace) &&
                     orderedTagId === DefaultTagID.DM &&
                     !SettingsStore.getValue("Spaces.showPeopleInSpace", this.props.activeSpace))

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, useMemo } from "react";
+import { Icon as CameraCircle } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
 
 import { Icon as HomeIcon } from "../../../../../../res/img/element-icons/home.svg";
 import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg";
@@ -30,6 +31,7 @@ import PosthogTrackers from "../../../../../PosthogTrackers";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
+import SdkConfig from "../../../../../SdkConfig";
 
 type InteractionName = "WebSettingsSidebarTabSpacesCheckbox" | "WebQuickSettingsPinToSidebarCheckbox";
 
@@ -44,7 +46,14 @@ export const onMetaSpaceChangeFactory =
         PosthogTrackers.trackInteraction(
             interactionName,
             e,
-            [MetaSpace.Home, null, MetaSpace.Favourites, MetaSpace.People, MetaSpace.Orphans].indexOf(metaSpace),
+            [
+                MetaSpace.Home,
+                null,
+                MetaSpace.Favourites,
+                MetaSpace.People,
+                MetaSpace.Orphans,
+                MetaSpace.VideoRooms,
+            ].indexOf(metaSpace),
         );
     };
 
@@ -54,8 +63,15 @@ const SidebarUserSettingsTab: React.FC = () => {
         [MetaSpace.Favourites]: favouritesEnabled,
         [MetaSpace.People]: peopleEnabled,
         [MetaSpace.Orphans]: orphansEnabled,
+        [MetaSpace.VideoRooms]: videoRoomsEnabled,
     } = useSettingValue<Record<MetaSpace, boolean>>("Spaces.enabledMetaSpaces");
     const allRoomsInHome = useSettingValue<boolean>("Spaces.allRoomsInHome");
+    const guestSpaUrl = useMemo(() => {
+        return SdkConfig.get("element_call").guest_spa_url;
+    }, []);
+    const conferenceSubsectionText =
+        _t("settings|sidebar|metaspaces_video_rooms_description") +
+        (guestSpaUrl ? " " + _t("settings|sidebar|metaspaces_video_rooms_description_invite_extension") : "");
 
     const onAllRoomsInHomeToggle = async (event: ChangeEvent<HTMLInputElement>): Promise<void> => {
         await SettingsStore.setValue("Spaces.allRoomsInHome", null, SettingLevel.ACCOUNT, event.target.checked);
@@ -140,6 +156,22 @@ const SidebarUserSettingsTab: React.FC = () => {
                             {_t("settings|sidebar|metaspaces_orphans_description")}
                         </SettingsSubsectionText>
                     </StyledCheckbox>
+                    {SettingsStore.getValue("feature_video_rooms") && (
+                        <StyledCheckbox
+                            checked={!!videoRoomsEnabled}
+                            onChange={onMetaSpaceChangeFactory(
+                                MetaSpace.VideoRooms,
+                                "WebSettingsSidebarTabSpacesCheckbox",
+                            )}
+                            className="mx_SidebarUserSettingsTab_checkbox"
+                        >
+                            <SettingsSubsectionText>
+                                <CameraCircle />
+                                {_t("settings|sidebar|metaspaces_video_rooms")}
+                            </SettingsSubsectionText>
+                            <SettingsSubsectionText>{conferenceSubsectionText}</SettingsSubsectionText>
+                        </StyledCheckbox>
+                    )}
                 </SettingsSubsection>
             </SettingsSection>
         </SettingsTab>

src/components/views/spaces/SpacePanel.tsx

@@ -209,6 +209,20 @@ const OrphansButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollap
     );
 };
 
+const VideoRoomsButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed }) => {
+    return (
+        <MetaSpaceButton
+            spaceKey={MetaSpace.VideoRooms}
+            className="mx_SpaceButton_videoRooms"
+            selected={selected}
+            isPanelCollapsed={isPanelCollapsed}
+            label={getMetaSpaceName(MetaSpace.VideoRooms)}
+            notificationState={SpaceStore.instance.getNotificationState(MetaSpace.VideoRooms)}
+            size="32px"
+        />
+    );
+};
+
 const CreateSpaceButton: React.FC<Pick<IInnerSpacePanelProps, "isPanelCollapsed" | "setPanelCollapsed">> = ({
     isPanelCollapsed,
     setPanelCollapsed,
@@ -263,6 +277,7 @@ const metaSpaceComponentMap: Record<MetaSpace, typeof HomeButton> = {
     [MetaSpace.Favourites]: FavouritesButton,
     [MetaSpace.People]: PeopleButton,
     [MetaSpace.Orphans]: OrphansButton,
+    [MetaSpace.VideoRooms]: VideoRoomsButton,
 };
 
 interface IInnerSpacePanelProps extends DroppableProvidedProps {
@@ -279,7 +294,9 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
         const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces();
         const activeSpaces = activeSpace ? [activeSpace] : [];
 
-        const metaSpacesSection = metaSpaces.map((key) => {
+        const metaSpacesSection = metaSpaces
+            .filter((key) => !(key === MetaSpace.VideoRooms && !SettingsStore.getValue("feature_video_rooms")))
+            .map((key) => {
                 const Component = metaSpaceComponentMap[key];
                 return <Component key={key} selected={activeSpace === key} isPanelCollapsed={isPanelCollapsed} />;
             });

src/i18n/strings/en_EN.json

@@ -2853,6 +2853,9 @@
             "metaspaces_orphans_description": "Group all your rooms that aren't part of a space in one place.",
             "metaspaces_people_description": "Group all your people in one place.",
             "metaspaces_subsection": "Spaces to show",
+            "metaspaces_video_rooms": "Video rooms and conferences",
+            "metaspaces_video_rooms_description": "Group all private video rooms and conferences.",
+            "metaspaces_video_rooms_description_invite_extension": "In conferences you can invite people outside of matrix.",
             "spaces_explainer": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.",
             "title": "Sidebar"
         },
@@ -3836,6 +3839,9 @@
         "legacy_call": "Legacy Call",
         "maximise": "Fill screen",
         "maximise_call": "Maximise call",
+        "metaspace_video_rooms": {
+            "conference_room_section": "Conferences"
+        },
         "minimise_call": "Minimise call",
         "misconfigured_server": "Call failed due to misconfigured server",
         "misconfigured_server_description": "Please ask the administrator of your homeserver (<code>%(homeserverDomain)s</code>) to configure a TURN server in order for calls to work reliably.",

src/stores/room-list/RoomListStore.ts

@@ -234,7 +234,12 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
                         return;
                     }
                 }
-                await this.handleRoomUpdate(updatedRoom, RoomUpdateCause.Timeline);
+                // If the join rule changes we need to update the tags for the room.
+                // A conference tag is determined by the room public join rule.
+                if (eventPayload.event.getType() === EventType.RoomJoinRules)
+                    await this.handleRoomUpdate(updatedRoom, RoomUpdateCause.PossibleTagChange);
+                else await this.handleRoomUpdate(updatedRoom, RoomUpdateCause.Timeline);
+
                 this.updateFn.trigger();
             };
             if (!room) {

src/stores/room-list/algorithms/Algorithm.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Room } from "matrix-js-sdk/src/matrix";
+import { JoinRule, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { EventEmitter } from "events";
@@ -577,6 +577,9 @@ export class Algorithm extends EventEmitter {
                 tags = [DefaultTagID.DM];
             }
         }
+        if (room.isCallRoom() && (room.getJoinRule() === JoinRule.Public || room.getJoinRule() === JoinRule.Knock)) {
+            tags.push(DefaultTagID.Conference);
+        }
 
         return tags;
     }

src/stores/room-list/models.ts

@@ -21,6 +21,7 @@ export enum DefaultTagID {
     LowPriority = "m.lowpriority",
     Favourite = "m.favourite",
     DM = "im.vector.fake.direct",
+    Conference = "im.vector.fake.conferences",
     ServerNotice = "m.server_notice",
     Suggested = "im.vector.fake.suggested",
 }
@@ -29,6 +30,7 @@ export const OrderedDefaultTagIDs = [
     DefaultTagID.Invite,
     DefaultTagID.Favourite,
     DefaultTagID.DM,
+    DefaultTagID.Conference,
     DefaultTagID.Untagged,
     DefaultTagID.LowPriority,
     DefaultTagID.ServerNotice,

src/stores/spaces/SpaceStore.ts

@@ -75,7 +75,13 @@ interface IState {}
 
 const ACTIVE_SPACE_LS_KEY = "mx_active_space";
 
-const metaSpaceOrder: MetaSpace[] = [MetaSpace.Home, MetaSpace.Favourites, MetaSpace.People, MetaSpace.Orphans];
+const metaSpaceOrder: MetaSpace[] = [
+    MetaSpace.Home,
+    MetaSpace.Favourites,
+    MetaSpace.People,
+    MetaSpace.Orphans,
+    MetaSpace.VideoRooms,
+];
 
 const MAX_SUGGESTED_ROOMS = 20;
 
@@ -432,7 +438,9 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         if (space === MetaSpace.Home && this.allRoomsInHome) {
             return true;
         }
-
+        if (space === MetaSpace.VideoRooms) {
+            return !!this.matrixClient?.getRoom(roomId)?.isCallRoom();
+        }
         if (this.getSpaceFilteredRoomIds(space, includeDescendantSpaces)?.has(roomId)) {
             return true;
         }
@@ -1033,6 +1041,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                     this.onRoomsUpdate();
                 }
                 break;
+            case EventType.RoomCreate:
+                // The room might become a video room. We need to tag it for that videoRooms space.
+                this.onRoomsUpdate();
+                break;
         }
     };
 

src/stores/spaces/index.ts

@@ -32,6 +32,7 @@ export enum MetaSpace {
     Favourites = "favourites-space",
     People = "people-space",
     Orphans = "orphans-space",
+    VideoRooms = "video-rooms-space",
 }
 
 export const getMetaSpaceName = (spaceKey: MetaSpace, allRoomsInHome = false): string => {
@@ -44,6 +45,8 @@ export const getMetaSpaceName = (spaceKey: MetaSpace, allRoomsInHome = false): s
             return _t("common|people");
         case MetaSpace.Orphans:
             return _t("common|orphan_rooms");
+        case MetaSpace.VideoRooms:
+            return _t("voip|metaspace_video_rooms|conference_room_section");
     }
 };
 
@@ -58,6 +61,7 @@ export function isMetaSpace(spaceKey?: SpaceKey): boolean {
         spaceKey === MetaSpace.Home ||
         spaceKey === MetaSpace.Favourites ||
         spaceKey === MetaSpace.People ||
-        spaceKey === MetaSpace.Orphans
+        spaceKey === MetaSpace.Orphans ||
+        spaceKey === MetaSpace.VideoRooms
     );
 }

test/components/views/rooms/RoomList-test.tsx

@@ -16,10 +16,11 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-import { render, screen, within } from "@testing-library/react";
+import { cleanup, queryByRole, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 import { Room } from "matrix-js-sdk/src/matrix";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import RoomList from "../../../../src/components/views/rooms/RoomList";
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
@@ -33,6 +34,9 @@ import { mkSpace, stubClient } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
+import RoomListStore from "../../../../src/stores/room-list/RoomListStore";
+import { ITagMap } from "../../../../src/stores/room-list/algorithms/models";
+import { DefaultTagID } from "../../../../src/stores/room-list/models";
 
 jest.mock("../../../../src/customisations/helpers/UIComponents", () => ({
     shouldShowComponent: jest.fn(),
@@ -52,6 +56,7 @@ describe("RoomList", () => {
 
     function getComponent(props: Partial<ComponentProps<typeof RoomList>> = {}): JSX.Element {
         return (
+            <TooltipProvider>
                 <RoomList
                     onKeyDown={jest.fn()}
                     onFocus={jest.fn()}
@@ -62,6 +67,7 @@ describe("RoomList", () => {
                     activeSpace={MetaSpace.Home}
                     {...props}
                 />
+            </TooltipProvider>
         );
     }
 
@@ -206,5 +212,74 @@ describe("RoomList", () => {
                 });
             });
         });
+
+        describe("when video meta space is active", () => {
+            const videoRoomPrivate = "!videoRoomPrivate_server";
+            const videoRoomPublic = "!videoRoomPublic_server";
+            const videoRoomKnock = "!videoRoomKnock_server";
+
+            beforeEach(async () => {
+                cleanup();
+                const rooms: Room[] = [];
+                RoomListStore.instance;
+                testUtils.mkRoom(client, videoRoomPrivate, rooms);
+                testUtils.mkRoom(client, videoRoomPublic, rooms);
+                testUtils.mkRoom(client, videoRoomKnock, rooms);
+
+                mocked(client).getRoom.mockImplementation(
+                    (roomId) => rooms.find((room) => room.roomId === roomId) || null,
+                );
+                mocked(client).getRooms.mockImplementation(() => rooms);
+
+                const videoRoomKnockRoom = client.getRoom(videoRoomKnock)!;
+                const videoRoomPrivateRoom = client.getRoom(videoRoomPrivate)!;
+                const videoRoomPublicRoom = client.getRoom(videoRoomPublic)!;
+
+                [videoRoomPrivateRoom, videoRoomPublicRoom, videoRoomKnockRoom].forEach((room) => {
+                    (room.isCallRoom as jest.Mock).mockReturnValue(true);
+                });
+
+                const roomLists: ITagMap = {};
+                roomLists[DefaultTagID.Conference] = [videoRoomKnockRoom, videoRoomPublicRoom];
+                roomLists[DefaultTagID.Untagged] = [videoRoomPrivateRoom];
+                jest.spyOn(RoomListStore.instance, "orderedLists", "get").mockReturnValue(roomLists);
+                await testUtils.setupAsyncStoreWithClient(store, client);
+
+                store.setActiveSpace(MetaSpace.VideoRooms);
+            });
+
+            it("renders Conferences and Room but no People section", () => {
+                const renderResult = render(getComponent({ activeSpace: MetaSpace.VideoRooms }));
+                const roomsEl = renderResult.getByRole("treeitem", { name: "Rooms" });
+                const conferenceEl = renderResult.getByRole("treeitem", { name: "Conferences" });
+
+                const noInvites = screen.queryByRole("treeitem", { name: "Invites" });
+                const noFavourites = screen.queryByRole("treeitem", { name: "Favourites" });
+                const noPeople = screen.queryByRole("treeitem", { name: "People" });
+                const noLowPriority = screen.queryByRole("treeitem", { name: "Low priority" });
+                const noHistorical = screen.queryByRole("treeitem", { name: "Historical" });
+
+                expect(roomsEl).toBeVisible();
+                expect(conferenceEl).toBeVisible();
+
+                expect(noInvites).toBeFalsy();
+                expect(noFavourites).toBeFalsy();
+                expect(noPeople).toBeFalsy();
+                expect(noLowPriority).toBeFalsy();
+                expect(noHistorical).toBeFalsy();
+            });
+            it("renders Public and Knock rooms in Conferences section", () => {
+                const renderResult = render(getComponent({ activeSpace: MetaSpace.VideoRooms }));
+                const conferenceList = renderResult.getByRole("group", { name: "Conferences" });
+                expect(queryByRole(conferenceList, "treeitem", { name: videoRoomPublic })).toBeVisible();
+                expect(queryByRole(conferenceList, "treeitem", { name: videoRoomKnock })).toBeVisible();
+                expect(queryByRole(conferenceList, "treeitem", { name: videoRoomPrivate })).toBeFalsy();
+
+                const roomsList = renderResult.getByRole("group", { name: "Rooms" });
+                expect(queryByRole(roomsList, "treeitem", { name: videoRoomPrivate })).toBeVisible();
+                expect(queryByRole(roomsList, "treeitem", { name: videoRoomPublic })).toBeFalsy();
+                expect(queryByRole(roomsList, "treeitem", { name: videoRoomKnock })).toBeFalsy();
+            });
+        });
     });
 });

test/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx

@@ -23,6 +23,7 @@ import SettingsStore from "../../../../../../src/settings/SettingsStore";
 import { MetaSpace } from "../../../../../../src/stores/spaces";
 import { SettingLevel } from "../../../../../../src/settings/SettingLevel";
 import { flushPromises } from "../../../../../test-utils";
+import SdkConfig from "../../../../../../src/SdkConfig";
 
 describe("<SidebarUserSettingsTab />", () => {
     beforeEach(() => {
@@ -31,9 +32,25 @@ describe("<SidebarUserSettingsTab />", () => {
         jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
     });
 
-    it("renders sidebar settings", () => {
+    it("renders sidebar settings with guest spa url", () => {
+        const spy = jest.spyOn(SdkConfig, "get").mockReturnValue({ guest_spa_url: "https://somewhere.org" });
+        const originalGetValue = SettingsStore.getValue;
+        const spySettingsStore = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+            return setting === "feature_video_rooms" ? true : originalGetValue(setting);
+        });
         const { container } = render(<SidebarUserSettingsTab />);
         expect(container).toMatchSnapshot();
+        spySettingsStore.mockRestore();
+        spy.mockRestore();
+    });
+    it("renders sidebar settings without guest spa url", () => {
+        const originalGetValue = SettingsStore.getValue;
+        const spySettingsStore = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+            return setting === "feature_video_rooms" ? true : originalGetValue(setting);
+        });
+        const { container } = render(<SidebarUserSettingsTab />);
+        expect(container).toMatchSnapshot();
+        spySettingsStore.mockRestore();
     });
 
     it("toggles all rooms in home setting", async () => {

test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
+exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url 1`] = `
 <div>
   <div
     class="mx_SettingsTab"
@@ -205,6 +205,284 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
                   </div>
                 </label>
               </span>
+              <span
+                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  id="checkbox_MwbPDmfGtm"
+                  type="checkbox"
+                />
+                <label
+                  for="checkbox_MwbPDmfGtm"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      <div />
+                      Video rooms and conferences
+                    </div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      Group all private video rooms and conferences. In conferences you can invite people outside of matrix.
+                    </div>
+                  </div>
+                </label>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa url 1`] = `
+<div>
+  <div
+    class="mx_SettingsTab"
+  >
+    <div
+      class="mx_SettingsTab_sections"
+    >
+      <div
+        class="mx_SettingsSection"
+      >
+        <h2
+          class="mx_Heading_h3"
+        >
+          Sidebar
+        </h2>
+        <div
+          class="mx_SettingsSection_subSections"
+        >
+          <div
+            class="mx_SettingsSubsection"
+          >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+              >
+                Spaces to show
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_description"
+            >
+              <div
+                class="mx_SettingsSubsection_text"
+              >
+                Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.
+              </div>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <span
+                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  checked=""
+                  disabled=""
+                  id="checkbox_vY7Q4uEh9K"
+                  type="checkbox"
+                />
+                <label
+                  for="checkbox_vY7Q4uEh9K"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      <div />
+                      Home
+                    </div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      Home is useful for getting an overview of everything.
+                    </div>
+                  </div>
+                </label>
+              </span>
+              <span
+                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
+                  id="checkbox_38QgU2Pomx"
+                  type="checkbox"
+                />
+                <label
+                  for="checkbox_38QgU2Pomx"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      Show all rooms
+                    </div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      Show all your rooms in Home, even if they're in a space.
+                    </div>
+                  </div>
+                </label>
+              </span>
+              <span
+                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  id="checkbox_wKpa6hpi3Y"
+                  type="checkbox"
+                />
+                <label
+                  for="checkbox_wKpa6hpi3Y"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      <div />
+                      Favourites
+                    </div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      Group all your favourite rooms and people in one place.
+                    </div>
+                  </div>
+                </label>
+              </span>
+              <span
+                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  id="checkbox_EetmBG4yVC"
+                  type="checkbox"
+                />
+                <label
+                  for="checkbox_EetmBG4yVC"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      <div />
+                      People
+                    </div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      Group all your people in one place.
+                    </div>
+                  </div>
+                </label>
+              </span>
+              <span
+                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  id="checkbox_eEefiPqpMR"
+                  type="checkbox"
+                />
+                <label
+                  for="checkbox_eEefiPqpMR"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      <div />
+                      Rooms outside of a space
+                    </div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      Group all your rooms that aren't part of a space in one place.
+                    </div>
+                  </div>
+                </label>
+              </span>
+              <span
+                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  id="checkbox_MwbPDmfGtm"
+                  type="checkbox"
+                />
+                <label
+                  for="checkbox_MwbPDmfGtm"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      <div />
+                      Video rooms and conferences
+                    </div>
+                    <div
+                      class="mx_SettingsSubsection_text"
+                    >
+                      Group all private video rooms and conferences.
+                    </div>
+                  </div>
+                </label>
+              </span>
             </div>
           </div>
         </div>

test/components/views/spaces/SpacePanel-test.tsx

@@ -15,11 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, screen, fireEvent, act } from "@testing-library/react";
+import { render, screen, fireEvent, act, cleanup } from "@testing-library/react";
 import { mocked } from "jest-mock";
 import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 
-import UnwrappedSpacePanel from "../../../../src/components/views/spaces/SpacePanel";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { MetaSpace, SpaceKey } from "../../../../src/stores/spaces";
 import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents";
@@ -29,6 +28,8 @@ import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { SpaceNotificationState } from "../../../../src/stores/notifications/SpaceNotificationState";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import UnwrappedSpacePanel from "../../../../src/components/views/spaces/SpacePanel";
 
 // DND test utilities based on
 // https://github.com/colinrobertbrooks/react-beautiful-dnd-test-utils/issues/18#issuecomment-1373388693
@@ -135,8 +136,28 @@ describe("<SpacePanel />", () => {
     });
 
     beforeEach(() => {
+        SpaceStore.instance.enabledMetaSpaces.push(
+            MetaSpace.Home,
+            MetaSpace.Favourites,
+            MetaSpace.People,
+            MetaSpace.Orphans,
+            MetaSpace.VideoRooms,
+        );
         mocked(shouldShowComponent).mockClear().mockReturnValue(true);
     });
+    afterEach(() => {
+        cleanup();
+    });
+
+    it("should show all activated MetaSpaces in the correct order", async () => {
+        const originalGetValue = SettingsStore.getValue;
+        const spySettingsStore = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+            return setting === "feature_video_rooms" ? true : originalGetValue(setting);
+        });
+        const renderResult = render(<SpacePanel />);
+        expect(renderResult.asFragment()).toMatchSnapshot();
+        spySettingsStore.mockRestore();
+    });
 
     describe("create new space button", () => {
         it("renders create space button when UIComponent.CreateSpaces component should be shown", () => {

test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap

@@ -0,0 +1,238 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SpacePanel /> should show all activated MetaSpaces in the correct order 1`] = `
+<DocumentFragment>
+  <nav
+    aria-label="Spaces"
+    class="mx_SpacePanel collapsed"
+  >
+    <div
+      class="mx_UserMenu"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="User menu"
+        class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
+        role="button"
+        tabindex="0"
+        title="User menu"
+      >
+        <div
+          class="mx_UserMenu_userAvatar"
+        >
+          <span
+            class="_avatar_mcap2_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="5"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 32px;"
+          >
+            t
+          </span>
+        </div>
+      </div>
+      <div
+        aria-label="Expand"
+        class="mx_AccessibleButton mx_SpacePanel_toggleCollapse"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <ul
+      aria-label="Spaces"
+      class="mx_AutoHideScrollbar mx_SpaceTreeLevel"
+      data-rbd-droppable-context-id="0"
+      data-rbd-droppable-id="top-level-spaces"
+      role="tree"
+      tabindex="-1"
+    >
+      <li
+        aria-selected="false"
+        class="mx_SpaceItem collapsed"
+        role="treeitem"
+      >
+        <div
+          aria-label="Home"
+          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_home mx_SpaceButton_narrow"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_SpaceButton_selectionWrapper"
+          >
+            <div
+              class="mx_SpaceButton_avatarWrapper"
+            >
+              <div
+                class="mx_SpaceButton_avatarPlaceholder"
+              >
+                <div
+                  class="mx_SpaceButton_icon"
+                />
+              </div>
+            </div>
+            <div
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Options"
+              class="mx_AccessibleButton mx_SpaceButton_menuButton"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+        </div>
+      </li>
+      <li
+        aria-selected="false"
+        class="mx_SpaceItem collapsed"
+        role="treeitem"
+      >
+        <div
+          aria-label="Favourites"
+          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_favourites mx_SpaceButton_narrow"
+          role="button"
+          tabindex="-1"
+        >
+          <div
+            class="mx_SpaceButton_selectionWrapper"
+          >
+            <div
+              class="mx_SpaceButton_avatarWrapper"
+            >
+              <div
+                class="mx_SpaceButton_avatarPlaceholder"
+              >
+                <div
+                  class="mx_SpaceButton_icon"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-selected="false"
+        class="mx_SpaceItem collapsed"
+        role="treeitem"
+      >
+        <div
+          aria-label="People"
+          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_people mx_SpaceButton_narrow"
+          role="button"
+          tabindex="-1"
+        >
+          <div
+            class="mx_SpaceButton_selectionWrapper"
+          >
+            <div
+              class="mx_SpaceButton_avatarWrapper"
+            >
+              <div
+                class="mx_SpaceButton_avatarPlaceholder"
+              >
+                <div
+                  class="mx_SpaceButton_icon"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-selected="false"
+        class="mx_SpaceItem collapsed"
+        role="treeitem"
+      >
+        <div
+          aria-label="Other rooms"
+          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_orphans mx_SpaceButton_narrow"
+          role="button"
+          tabindex="-1"
+        >
+          <div
+            class="mx_SpaceButton_selectionWrapper"
+          >
+            <div
+              class="mx_SpaceButton_avatarWrapper"
+            >
+              <div
+                class="mx_SpaceButton_avatarPlaceholder"
+              >
+                <div
+                  class="mx_SpaceButton_icon"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-selected="false"
+        class="mx_SpaceItem collapsed"
+        role="treeitem"
+      >
+        <div
+          aria-label="Conferences"
+          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_videoRooms mx_SpaceButton_narrow"
+          role="button"
+          tabindex="-1"
+        >
+          <div
+            class="mx_SpaceButton_selectionWrapper"
+          >
+            <div
+              class="mx_SpaceButton_avatarWrapper"
+            >
+              <div
+                class="mx_SpaceButton_avatarPlaceholder"
+              >
+                <div
+                  class="mx_SpaceButton_icon"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-selected="false"
+        class="mx_SpaceItem mx_SpaceItem_new collapsed"
+        role="treeitem"
+      >
+        <div
+          aria-label="Create a space"
+          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_new mx_SpaceButton_narrow"
+          data-testid="create-space-button"
+          role="button"
+          tabindex="-1"
+        >
+          <div
+            class="mx_SpaceButton_selectionWrapper"
+          >
+            <div
+              class="mx_SpaceButton_avatarWrapper"
+            >
+              <div
+                class="mx_SpaceButton_avatarPlaceholder"
+              >
+                <div
+                  class="mx_SpaceButton_icon"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-expanded="false"
+      aria-label="Quick settings"
+      class="mx_AccessibleButton mx_QuickSettingsButton"
+      role="button"
+      tabindex="0"
+    />
+  </nav>
+</DocumentFragment>
+`;

test/stores/SpaceStore-test.ts

@@ -24,6 +24,8 @@ import {
     MatrixEvent,
     Room,
     RoomEvent,
+    JoinRule,
+    RoomState,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { defer } from "matrix-js-sdk/src/utils";
@@ -73,6 +75,8 @@ const room1 = "!room1:server";
 const room2 = "!room2:server";
 const room3 = "!room3:server";
 const room4 = "!room4:server";
+const videoRoomPrivate = "!videoRoomPrivate:server";
+const videoRoomPublic = "!videoRoomPublic:server";
 const space1 = "!space1:server";
 const space2 = "!space2:server";
 const space3 = "!space3:server";
@@ -317,6 +321,8 @@ describe("SpaceStore", () => {
                     room2,
                     room3,
                     room4,
+                    videoRoomPrivate,
+                    videoRoomPublic,
                 ].forEach(mkRoom);
                 mkSpace(space1, [fav1, room1]);
                 mkSpace(space2, [fav1, fav2, fav3, room1]);
@@ -404,6 +410,12 @@ describe("SpaceStore", () => {
                     },
                 );
 
+                [videoRoomPrivate, videoRoomPublic].forEach((roomId) => {
+                    const videoRoom = client.getRoom(roomId);
+                    (videoRoom!.isCallRoom as jest.Mock).mockReturnValue(true);
+                });
+                const videoRoomPublicRoom = client.getRoom(videoRoomPublic);
+                (videoRoomPublicRoom!.getJoinRule as jest.Mock).mockReturnValue(JoinRule.Public);
                 await run();
             });
 
@@ -461,6 +473,28 @@ describe("SpaceStore", () => {
                     expect(store.isRoomInSpace(MetaSpace.Home, room1)).toBeFalsy();
                 });
 
+                it("video room space contains all video rooms", async () => {
+                    await setShowAllRooms(false);
+                    expect(store.isRoomInSpace(MetaSpace.VideoRooms, videoRoomPublic)).toBeTruthy();
+                    expect(store.isRoomInSpace(MetaSpace.VideoRooms, videoRoomPrivate)).toBeTruthy();
+                    expect(store.isRoomInSpace(MetaSpace.VideoRooms, room1)).toBeFalsy();
+                });
+
+                it("updates the video room space when the room type changes", async () => {
+                    expect(store.isRoomInSpace(MetaSpace.VideoRooms, videoRoomPrivate)).toBeTruthy();
+                    (client.getRoom(videoRoomPublic)!.isCallRoom as jest.Mock).mockReturnValue(false);
+                    client.emit(
+                        RoomStateEvent.Events,
+                        {
+                            getRoomId: () => videoRoomPublic,
+                            getType: () => EventType.RoomCreate,
+                        } as unknown as MatrixEvent,
+                        {} as unknown as RoomState,
+                        null,
+                    );
+                    expect(store.isRoomInSpace(MetaSpace.VideoRooms, videoRoomPublic)).toBeFalsy();
+                });
+
                 it("space contains child rooms", () => {
                     expect(store.isRoomInSpace(space1, fav1)).toBeTruthy();
                     expect(store.isRoomInSpace(space1, room1)).toBeTruthy();

test/stores/room-list/RoomListStore-test.ts

@@ -18,21 +18,23 @@ import {
     ConditionKind,
     EventType,
     IPushRule,
+    JoinRule,
     MatrixEvent,
     PendingEventOrdering,
     PushRuleActionName,
     Room,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { mocked } from "jest-mock";
 
 import defaultDispatcher, { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import SettingsStore, { CallbackFn } from "../../../src/settings/SettingsStore";
 import { ListAlgorithm, SortAlgorithm } from "../../../src/stores/room-list/algorithms/models";
-import { OrderedDefaultTagIDs, RoomUpdateCause } from "../../../src/stores/room-list/models";
+import { DefaultTagID, OrderedDefaultTagIDs, RoomUpdateCause } from "../../../src/stores/room-list/models";
 import RoomListStore, { RoomListStoreClass } from "../../../src/stores/room-list/RoomListStore";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
-import { flushPromises, stubClient, upsertRoomStateEvents } from "../../test-utils";
+import { flushPromises, stubClient, upsertRoomStateEvents, mkRoom } from "../../test-utils";
 import { DEFAULT_PUSH_RULES, makePushRule } from "../../test-utils/pushRules";
 
 describe("RoomListStore", () => {
@@ -353,4 +355,50 @@ describe("RoomListStore", () => {
             });
         });
     });
+
+    describe("Correctly tags rooms", () => {
+        it("renders Public and Knock rooms in Conferences section", () => {
+            const videoRoomPrivate = "!videoRoomPrivate_server";
+            const videoRoomPublic = "!videoRoomPublic_server";
+            const videoRoomKnock = "!videoRoomKnock_server";
+
+            const rooms: Room[] = [];
+            RoomListStore.instance;
+            mkRoom(client, videoRoomPrivate, rooms);
+            mkRoom(client, videoRoomPublic, rooms);
+            mkRoom(client, videoRoomKnock, rooms);
+
+            mocked(client).getRoom.mockImplementation((roomId) => rooms.find((room) => room.roomId === roomId) || null);
+            mocked(client).getRooms.mockImplementation(() => rooms);
+
+            const videoRoomKnockRoom = client.getRoom(videoRoomKnock);
+            (videoRoomKnockRoom!.getJoinRule as jest.Mock).mockReturnValue(JoinRule.Knock);
+
+            const videoRoomPrivateRoom = client.getRoom(videoRoomPrivate);
+            (videoRoomPrivateRoom!.getJoinRule as jest.Mock).mockReturnValue(JoinRule.Invite);
+
+            const videoRoomPublicRoom = client.getRoom(videoRoomPublic);
+            (videoRoomPublicRoom!.getJoinRule as jest.Mock).mockReturnValue(JoinRule.Public);
+
+            [videoRoomPrivateRoom, videoRoomPublicRoom, videoRoomKnockRoom].forEach((room) => {
+                (room!.isCallRoom as jest.Mock).mockReturnValue(true);
+            });
+
+            expect(
+                RoomListStore.instance
+                    .getTagsForRoom(client.getRoom(videoRoomPublic)!)
+                    .includes(DefaultTagID.Conference),
+            ).toBeTruthy();
+            expect(
+                RoomListStore.instance
+                    .getTagsForRoom(client.getRoom(videoRoomKnock)!)
+                    .includes(DefaultTagID.Conference),
+            ).toBeTruthy();
+            expect(
+                RoomListStore.instance
+                    .getTagsForRoom(client.getRoom(videoRoomPrivate)!)
+                    .includes(DefaultTagID.Conference),
+            ).toBeFalsy();
+        });
+    });
 });

test/test-utils/test-utils.ts

@@ -623,6 +623,7 @@ export function mkStubRoom(
         hasMembershipState: () => false,
         isElementVideoRoom: jest.fn().mockReturnValue(false),
         isSpaceRoom: jest.fn().mockReturnValue(false),
+        isCallRoom: jest.fn().mockReturnValue(false),
         loadMembersIfNeeded: jest.fn(),
         maySendMessage: jest.fn().mockReturnValue(true),
         myUserId: client?.getUserId(),