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>
pull/28217/head
Timo 2024-03-25 19:35:31 +01:00 committed by GitHub
parent 10526c92bb
commit a24aa7e0f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 834 additions and 29 deletions

View File

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

View File

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

View File

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

View File

@ -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,10 +294,12 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces();
const activeSpaces = activeSpace ? [activeSpace] : [];
const metaSpacesSection = metaSpaces.map((key) => {
const Component = metaSpaceComponentMap[key];
return <Component key={key} selected={activeSpace === key} isPanelCollapsed={isPanelCollapsed} />;
});
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} />;
});
return (
<IndicatorScrollbar

View File

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

View File

@ -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) {

View File

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

View File

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

View File

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

View File

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

View File

@ -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,16 +56,18 @@ describe("RoomList", () => {
function getComponent(props: Partial<ComponentProps<typeof RoomList>> = {}): JSX.Element {
return (
<RoomList
onKeyDown={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
onResize={jest.fn()}
resizeNotifier={new ResizeNotifier()}
isMinimized={false}
activeSpace={MetaSpace.Home}
{...props}
/>
<TooltipProvider>
<RoomList
onKeyDown={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
onResize={jest.fn()}
resizeNotifier={new ResizeNotifier()}
isMinimized={false}
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();
});
});
});
});

View File

@ -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 () => {

View File

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

View File

@ -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", () => {

View File

@ -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>
`;

View File

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

View File

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

View File

@ -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(),