sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge branch 'develop' of ssh://github.com/element-hq/element-web into t3chguy/monorepo-playwright-common

Browse Source 
# Conflicts:
#	pnpm-lock.yaml
This commit is contained in:
Michael Telatynski
2026-04-10 16:41:45 +01:00
parent 917237fc3c b97a0be0fd
commit ec924deaa0
71 changed files with 1309 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/e2e/crypto/toasts.spec.ts
+1 -5
View File
@@ -43,11 +43,7 @@ test.describe("Key storage out of sync toast", () => {
});
test("should prompt for recovery key if 'enter recovery key' pressed", { tag: "@screenshot" }, async ({ page }) => {
// We need to wait for there to be two toasts as the wait below won't work in isolation:
// playwright only evaluates the 'first()' call initially, not subsequent times it checks, so
// it would always be checking the same toast, even if another one is now the first.
await expect(page.getByRole("alert")).toHaveCount(2);
await expect(page.getByRole("alert").first()).toMatchScreenshot(
await expect(page.getByRole("alert").filter({ hasText: "Your key storage is out of sync." })).toMatchScreenshot(
"key-storage-out-of-sync-toast.png",
screenshotOptions,
);
apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
+1 -1
View File
@@ -328,11 +328,11 @@ test.describe("Room list", () => {
const roomListView = getRoomList(page);
const videoRoom = roomListView.getByRole("option", { name: "video room" });
await expect(videoRoom).toHaveAttribute("aria-selected", "true"); // wait for room list update
// focus the user menu to avoid to have hover decoration
await page.getByRole("button", { name: "User menu" }).focus();
await expect(videoRoom).toBeVisible();
await expect(videoRoom).toMatchScreenshot("room-list-item-video.png");
});
});
apps/web/playwright/e2e/room-directory/room-directory.spec.ts
+3 -3
View File
@@ -48,9 +48,9 @@ test.describe("Room Directory", () => {
await app.closeDialog();
const resp = await bot.publicRooms({});
expect(resp.total_room_count_estimate).toEqual(1);
expect(resp.chunk).toHaveLength(1);
expect(resp.chunk[0].room_id).toEqual(roomId);
expect(resp.total_room_count_estimate).toBeGreaterThanOrEqual(1);
expect(resp.chunk).toHaveLength(resp.total_room_count_estimate);
expect(resp.chunk.find((r) => r.room_id === roomId)).toBeTruthy();
},
);
apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 259 KiB

After

Width:  |  Height:  |  Size: 268 KiB

apps/web/res/css/_components.pcss
+1 -1
View File
@@ -70,6 +70,7 @@
@import "./structures/_MatrixChat.pcss";
@import "./structures/_MessagePanel.pcss";
@import "./structures/_NonUrgentToastContainer.pcss";
@import "./structures/_PictureInPictureDragger.pcss";
@import "./structures/_QuickSettingsButton.pcss";
@import "./structures/_RightPanel.pcss";
@import "./structures/_RoomSearch.pcss";
@@ -375,7 +376,6 @@
@import "./views/voip/_DialPad.pcss";
@import "./views/voip/_DialPadContextMenu.pcss";
@import "./views/voip/_DialPadModal.pcss";
@import "./views/voip/_LegacyCallPreview.pcss";
@import "./views/voip/_LegacyCallView.pcss";
@import "./views/voip/_LegacyCallViewForRoom.pcss";
@import "./views/voip/_LegacyCallViewHeader.pcss";
apps/web/res/css/structures/_PictureInPictureDragger.pcss
+20
View File
@@ -0,0 +1,20 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_PictureInPictureDragger {
cursor: grab;
user-select: none;
left: 0;
position: fixed;
top: 0;
/* Display above any widget elements */
z-index: 102;
}
.mx_PictureInPictureDragger:active {
cursor: grabbing;
}
apps/web/res/css/views/rooms/_EventTile.pcss
+4
View File
@@ -1378,6 +1378,10 @@ $left-gutter: 64px;
display: flex;
}
.mx_EventTile_annotatedInline {
display: inline-flex;
}
.mx_EventTile_footer {
display: flex;
gap: var(--cpd-space-2x);
apps/web/res/css/views/voip/_LegacyCallPreview.pcss
-28
View File
@@ -1,28 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_LegacyCallPreview {
align-items: flex-end;
display: flex;
flex-direction: column;
gap: $spacing-16;
left: 0;
position: fixed;
top: 0;
/* Display above any widget elements */
z-index: 102;
.mx_VideoFeed_remote.mx_VideoFeed_voice {
min-height: 150px;
}
.mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
}
apps/web/src/RoomInvite.tsx
+3 -29
View File
@@ -7,9 +7,10 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { type ComponentProps } from "react";
import { EventType, type MatrixClient, type MatrixEvent, type Room, type User } from "matrix-js-sdk/src/matrix";
import { EventType, type MatrixEvent, type Room, type User } from "matrix-js-sdk/src/matrix";
import MultiInviter, { type CompletionStates, type MultiInviterOptions } from "./utils/MultiInviter";
import type MultiInviter from "./utils/MultiInviter";
import { type CompletionStates } from "./utils/MultiInviter";
import Modal from "./Modal";
import { _t } from "./languageHandler";
import InviteDialog from "./components/views/dialogs/InviteDialog";
@@ -19,33 +20,6 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog";
import { InviteKind } from "./components/views/dialogs/InviteDialogTypes";
import { type Member } from "./utils/direct-messages";
export interface IInviteResult {
states: CompletionStates;
inviter: MultiInviter;
}
/**
* Invites multiple addresses to a room.
*
* Simpler interface to {@link MultiInviter}.
*
* Any failures are returned via the `states` in the result.
*
* @param {string} roomId The ID of the room to invite to
* @param {string[]} addresses Array of strings of addresses to invite. May be matrix IDs or 3pids.
* @param options Options object.
* @returns {Promise} Promise
*/
export async function inviteMultipleToRoom(
client: MatrixClient,
roomId: string,
addresses: string[],
options: MultiInviterOptions = {},
): Promise<IInviteResult> {
const inviter = new MultiInviter(client, roomId, options);
return { states: await inviter.invite(addresses), inviter };
}
export function showStartChatInviteDialog(initialText = ""): void {
// This dialog handles the room creation internally - we don't need to worry about it.
Modal.createDialog(
apps/web/src/audio/VoiceRecording.ts
+5 -1
View File
@@ -103,10 +103,14 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
private async makeRecorder(): Promise<void> {
try {
const requestedDeviceId = MediaDeviceHandler.getAudioInput();
const deviceIdConstraint =
requestedDeviceId && requestedDeviceId !== "default" ? { deviceId: { exact: requestedDeviceId } } : {};
this.recorderStream = await navigator.mediaDevices.getUserMedia({
audio: {
channelCount: CHANNELS,
deviceId: MediaDeviceHandler.getAudioInput(),
...deviceIdConstraint,
autoGainControl: { ideal: MediaDeviceHandler.getAudioAutoGainControl() },
echoCancellation: { ideal: MediaDeviceHandler.getAudioEchoCancellation() },
noiseSuppression: { ideal: MediaDeviceHandler.getAudioNoiseSuppression() },
apps/web/src/components/structures/PictureInPictureDragger.tsx
+1 -9
View File
@@ -37,9 +37,7 @@ interface IChildrenOptions {
}
interface IProps {
className?: string;
children: Array<CreatePipChildren>;
draggable: boolean;
onDoubleClick?: () => void;
onMove?: () => void;
}
@@ -181,9 +179,6 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
};
private onStartMoving = (event: React.MouseEvent | MouseEvent): void => {
event.preventDefault();
event.stopPropagation();
this.mouseHeld = true;
this.startingPositionX = event.clientX;
this.startingPositionY = event.clientY;
@@ -217,9 +212,6 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
private onEndMoving = (event: MouseEvent): void => {
if (!this.mouseHeld) return;
event.preventDefault();
event.stopPropagation();
this.mouseHeld = false;
// Delaying this to the next event loop tick is necessary for click
// event cancellation to work
@@ -250,7 +242,7 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
return (
<aside
className={this.props.className}
className="mx_PictureInPictureDragger"
style={style}
ref={this.callViewWrapper}
onClickCapture={this.onClickCapture}
apps/web/src/components/structures/PipContainer.tsx
+1 -6
View File
@@ -266,12 +266,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
if (pipContent.length) {
return (
<PictureInPictureDragger
className="mx_LegacyCallPreview"
draggable={pipMode}
onDoubleClick={this.onDoubleClick}
onMove={this.onMove}
>
<PictureInPictureDragger onDoubleClick={this.onDoubleClick} onMove={this.onMove}>
{pipContent}
</PictureInPictureDragger>
);
apps/web/src/components/structures/RoomView.tsx
+8 -11
View File
@@ -1380,12 +1380,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
if (data.timeline.getTimelineSet() !== room.getUnfilteredTimelineSet()) return;
if (ev.getType() === "org.matrix.room.preview_urls") {
this.updatePreviewUrlVisibility(room);
this.updatePreviewUrlVisibility();
}
if (ev.getType() === "m.room.encryption") {
this.updateE2EStatus(room);
this.updatePreviewUrlVisibility(room);
this.updatePreviewUrlVisibility();
}
// ignore anything but real-time updates at the end of the room:
@@ -1541,15 +1541,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
});
}
private updatePreviewUrlVisibility(room: Room): void {
private updatePreviewUrlVisibility(): void {
this.setState(({ isRoomEncrypted }) => ({
showUrlPreview: this.getPreviewUrlVisibility(room, isRoomEncrypted),
showUrlPreview: this.getPreviewUrlVisibility(isRoomEncrypted),
}));
}
private getPreviewUrlVisibility({ roomId }: Room, isRoomEncrypted: boolean | null): boolean {
const key = isRoomEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled";
return SettingsStore.getValue(key, roomId);
private getPreviewUrlVisibility(isRoomEncrypted: boolean | null): boolean {
return SettingsStore.getValue(isRoomEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled");
}
private onRoom = (room: Room): void => {
@@ -1608,9 +1607,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
}
private onUrlPreviewsEnabledChange = (): void => {
if (this.state.room) {
this.updatePreviewUrlVisibility(this.state.room);
}
this.updatePreviewUrlVisibility();
};
private onRoomStateEvents = async (ev: MatrixEvent, state: RoomState): Promise<void> => {
@@ -1638,7 +1635,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
this.setState({
isRoomEncrypted,
showUrlPreview: this.getPreviewUrlVisibility(room, isRoomEncrypted),
showUrlPreview: this.getPreviewUrlVisibility(isRoomEncrypted),
...(newE2EStatus && { e2eStatus: newE2EStatus }),
});
}
apps/web/src/components/structures/SpaceRoomView.tsx
+6 -4
View File
@@ -34,7 +34,7 @@ import { useFeatureEnabled } from "../../hooks/useSettings";
import { useStateArray } from "../../hooks/useStateArray";
import { _t } from "../../languageHandler";
import PosthogTrackers from "../../PosthogTrackers";
import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
import { showRoomInviteDialog } from "../../RoomInvite";
import { UIComponent } from "../../settings/UIFeature";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import RightPanelStore from "../../stores/right-panel/RightPanelStore";
@@ -76,6 +76,7 @@ import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import SpacePillButton from "./SpacePillButton.tsx";
import { useRoomName } from "../../hooks/useRoomName.ts";
import MultiInviter from "../../utils/MultiInviter.ts";
interface IProps {
space: Room;
@@ -538,11 +539,12 @@ const SpaceSetupPrivateInvite: React.FC<{
setBusy(true);
const targetIds = emailAddresses.map((name) => name.trim()).filter(Boolean);
try {
const result = await inviteMultipleToRoom(space.client, space.roomId, targetIds);
const inviter = new MultiInviter(space.client, space.roomId);
const states = await inviter.invite(targetIds);
const failedUsers = Object.keys(result.states).filter((a) => result.states[a] === "error");
const failedUsers = Object.keys(states).filter((a) => states[a] === "error");
if (failedUsers.length > 0) {
logger.log("Failed to invite users to space: ", result);
logger.log("Failed to invite users to space:", states);
setError(
_t("create_space|failed_invite_users", {
csvUsers: failedUsers.join(", "),
apps/web/src/components/views/dialogs/InviteDialog.tsx
+11 -5
View File
@@ -25,7 +25,7 @@ import { getDefaultIdentityServerUrl, setToDefaultIdentityServer } from "../../.
import { buildActivityScores, buildMemberScores, compareMembers } from "../../../utils/SortMembers";
import { abbreviateUrl } from "../../../utils/UrlUtils";
import IdentityAuthClient from "../../../IdentityAuthClient";
import { type IInviteResult, inviteMultipleToRoom, showAnyInviteErrors } from "../../../RoomInvite";
import { showAnyInviteErrors } from "../../../RoomInvite";
import { Action } from "../../../dispatcher/actions";
import { DefaultTagID } from "../../../stores/room-list-v3/skip-list/tag";
import RoomListStore from "../../../stores/room-list/RoomListStore";
@@ -63,6 +63,7 @@ import { type NonEmptyArray } from "../../../@types/common";
import { SdkContextClass } from "../../../contexts/SDKContext";
import { type UserProfilesStore } from "../../../stores/UserProfilesStore";
import InviteProgressBody from "./InviteProgressBody.tsx";
import MultiInviter, { type CompletionStates as MultiInviterCompletionStates } from "../../../utils/MultiInviter.ts";
// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
/* eslint-disable camelcase */
@@ -409,10 +410,14 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
.map((member) => ({ userId: member.userId, user: toMember(member) }));
}
private shouldAbortAfterInviteError(result: IInviteResult, room: Room): boolean {
private shouldAbortAfterInviteError(
states: MultiInviterCompletionStates,
inviter: MultiInviter,
room: Room,
): boolean {
this.setState({ busy: false });
const userMap = new Map<string, Member>(this.state.targets.map((member) => [member.userId, member]));
return !showAnyInviteErrors(result.states, room, result.inviter, userMap);
return !showAnyInviteErrors(states, room, inviter, userMap);
}
private convertFilter(): Member[] {
@@ -483,11 +488,12 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
}
try {
const result = await inviteMultipleToRoom(cli, this.props.roomId, targetIds, {
const inviter = new MultiInviter(cli, this.props.roomId, {
// We show our own progress body, so don't pop up a separate dialog.
inhibitProgressDialog: true,
});
if (!this.shouldAbortAfterInviteError(result, room)) {
const states = await inviter.invite(targetIds);
if (!this.shouldAbortAfterInviteError(states, inviter, room)) {
// handles setting error message too
this.props.onFinished(true);
}
apps/web/src/components/views/elements/SettingsFlag.tsx
+7
View File
@@ -25,6 +25,7 @@ interface IProps {
label?: string;
isExplicit?: boolean;
hideIfCannotSet?: boolean;
requires?: BooleanSettingKey[];
onChange?(checked: boolean): void;
}
@@ -45,6 +46,12 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
public componentDidMount(): void {
defaultWatchManager.watchSetting(this.props.name, this.props.roomId ?? null, this.onSettingChange);
if (this.props.requires) {
// If we have any dependencies for this feature, also watch those features to ensure we catch the disabled state.
for (const flag of this.props.requires) {
defaultWatchManager.watchSetting(flag, this.props.roomId ?? null, this.onSettingChange);
}
}
}
public componentWillUnmount(): void {
apps/web/src/components/views/messages/TextualBody.tsx
+5 -2
View File
@@ -301,6 +301,9 @@ class InnerTextualBody extends React.Component<Props> {
const isCaption = [MsgType.Image, MsgType.File, MsgType.Audio, MsgType.Video].includes(
content.msgtype as MsgType,
);
const annotatedClassName = isEmote
? "mx_EventTile_annotated mx_EventTile_annotatedInline"
: "mx_EventTile_annotated";
const willHaveWrapper =
this.props.replacingEventId || this.props.isSeeingThroughMessageHiddenForModeration || isEmote;
@@ -315,7 +318,7 @@ class InnerTextualBody extends React.Component<Props> {
if (this.props.replacingEventId) {
body = (
<div dir="auto" className="mx_EventTile_annotated">
<div dir="auto" className={annotatedClassName}>
{body}
{this.renderEditedMarker()}
</div>
@@ -323,7 +326,7 @@ class InnerTextualBody extends React.Component<Props> {
}
if (this.props.isSeeingThroughMessageHiddenForModeration) {
body = (
<div dir="auto" className="mx_EventTile_annotated">
<div dir="auto" className={annotatedClassName}>
{body}
{this.renderPendingModerationMarker()}
</div>
apps/web/src/components/views/room_settings/UrlPreviewSettings.tsx
-152
View File
@@ -1,152 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2018, 2019 New Vector Ltd
Copyright 2017 Travis Ralston
Copyright 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React, { type ReactNode, type JSX } from "react";
import { type Room } from "matrix-js-sdk/src/matrix";
import { InlineSpinner } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
import dis from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
import { SettingLevel } from "../../../settings/SettingLevel";
import SettingsFlag from "../elements/SettingsFlag";
import SettingsFieldset from "../settings/SettingsFieldset";
import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
import { useIsEncrypted } from "../../../hooks/useIsEncrypted.ts";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext.tsx";
import { useSettingValueAt } from "../../../hooks/useSettings.ts";
/**
* The URL preview settings for a room
*/
interface UrlPreviewSettingsProps {
/**
* The room.
*/
room: Room;
}
export function UrlPreviewSettings({ room }: UrlPreviewSettingsProps): JSX.Element {
const { roomId } = room;
const matrixClient = useMatrixClientContext();
const isEncrypted = useIsEncrypted(matrixClient, room);
const isLoading = isEncrypted === null;
return (
<SettingsFieldset
legend={_t("room_settings|general|url_previews_section")}
description={!isLoading && <Description isEncrypted={isEncrypted} />}
>
{isLoading ? (
<InlineSpinner />
) : (
<>
<PreviewsForRoom isEncrypted={isEncrypted} roomId={roomId} />
<SettingsFlag
name={isEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled"}
level={SettingLevel.ROOM_DEVICE}
roomId={roomId}
/>
</>
)}
</SettingsFieldset>
);
}
/**
* Click handler for the user settings link
* @param e
*/
function onClickUserSettings(e: ButtonEvent): void {
e.preventDefault();
e.stopPropagation();
dis.fire(Action.ViewUserSettings);
}
/**
* The description for the URL preview settings
*/
interface DescriptionProps {
/**
* Whether the room is encrypted
*/
isEncrypted: boolean;
}
function Description({ isEncrypted }: DescriptionProps): JSX.Element {
const urlPreviewsEnabled = useSettingValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled");
let previewsForAccount: ReactNode | undefined;
if (isEncrypted) {
previewsForAccount = _t("room_settings|general|url_preview_encryption_warning");
} else {
const button = {
a: (sub: string) => (
<AccessibleButton kind="link_inline" onClick={onClickUserSettings}>
{sub}
</AccessibleButton>
),
};
previewsForAccount = urlPreviewsEnabled
? _t("room_settings|general|user_url_previews_default_on", {}, button)
: _t("room_settings|general|user_url_previews_default_off", {}, button);
}
return (
<>
<p>{_t("room_settings|general|url_preview_explainer")}</p>
<p>{previewsForAccount}</p>
</>
);
}
/**
* The description for the URL preview settings
*/
interface PreviewsForRoomProps {
/**
* Whether the room is encrypted
*/
isEncrypted: boolean;
/**
* The room ID
*/
roomId: string;
}
function PreviewsForRoom({ isEncrypted, roomId }: PreviewsForRoomProps): JSX.Element | null {
const urlPreviewsEnabled = useSettingValueAt(
SettingLevel.ACCOUNT,
"urlPreviewsEnabled",
roomId,
/*explicit=*/ true,
);
if (isEncrypted) return null;
let previewsForRoom: ReactNode;
if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, SettingLevel.ROOM)) {
previewsForRoom = (
<SettingsFlag name="urlPreviewsEnabled" level={SettingLevel.ROOM} roomId={roomId} isExplicit={true} />
);
} else {
previewsForRoom = (
<div>
{urlPreviewsEnabled
? _t("room_settings|general|default_url_previews_on")
: _t("room_settings|general|default_url_previews_off")}
</div>
);
}
return previewsForRoom;
}
apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
-8
View File
@@ -15,14 +15,11 @@ import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
import AccessibleButton, { type ButtonEvent } from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher/dispatcher";
import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
import SettingsStore from "../../../../../settings/SettingsStore";
import { UIFeature } from "../../../../../settings/UIFeature";
import AliasSettings from "../../../room_settings/AliasSettings";
import PosthogTrackers from "../../../../../PosthogTrackers";
import { SettingsSubsection } from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import { UrlPreviewSettings } from "../../../room_settings/UrlPreviewSettings";
import { MediaPreviewAccountSettings } from "../user/MediaPreviewAccountSettings";
interface IProps {
@@ -62,10 +59,6 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
const canSetCanonical = room.currentState.mayClientSendStateEvent("m.room.canonical_alias", client);
const canonicalAliasEv = room.currentState.getStateEvents("m.room.canonical_alias", "") ?? undefined;
const urlPreviewSettings = SettingsStore.getValue(UIFeature.URLPreviews) ? (
<UrlPreviewSettings room={room} />
) : null;
let leaveSection;
if (room.getMyMembership() === KnownMembership.Join) {
leaveSection = (
@@ -99,7 +92,6 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
</SettingsSection>
<SettingsSection heading={_t("room_settings|general|other_section")}>
{urlPreviewSettings}
<SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
<MediaPreviewAccountSettings roomId={room.roomId} />
</SettingsSubsection>
apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+14 -5
View File
@@ -147,11 +147,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
"showCodeLineNumbers",
];
private static IMAGES_AND_VIDEOS_SETTINGS: BooleanSettingKey[] = [
"urlPreviewsEnabled",
"autoplayGifs",
"autoplayVideo",
];
private static IMAGES_AND_VIDEOS_SETTINGS: BooleanSettingKey[] = ["autoplayGifs", "autoplayVideo"];
private static TIMELINE_SETTINGS: BooleanSettingKey[] = [
"showTypingNotifications",
@@ -350,6 +346,19 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
{this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
</SettingsSubsection>
<SettingsSubsection
heading={_t("settings|preferences|link_previews_heading")}
description={_t("settings|preferences|link_previews_description")}
formWrap
>
<SettingsFlag name="urlPreviewsEnabled" level={SettingLevel.DEVICE} />
<SettingsFlag
name="urlPreviewsEnabled_e2ee"
level={SettingLevel.DEVICE}
requires={["urlPreviewsEnabled"]}
/>
</SettingsSubsection>
<SettingsSubsection heading={_t("settings|preferences|media_heading")} formWrap>
{this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
</SettingsSubsection>
apps/web/src/device-listener/DeviceListenerCurrentDevice.ts
+13 -9
View File
@@ -228,21 +228,25 @@ export class DeviceListenerCurrentDevice {
logSpan.info("No default 4S key but backup disabled: no toast needed");
await this.setDeviceState("ok", logSpan);
}
} else {
// If we get here, then we are verified, have key backup, and
// 4S, but allSystemsReady is false, which means that either
// secretStorageStatus.ready is false (which means that 4S
// doesn't have all the secrets), or we don't have the backup
// key cached locally. If any of the cross-signing keys are
// missing locally, that is handled by the
// `!allCrossSigningSecretsCached` branch above.
logSpan.warn("4S is missing secrets or backup key not cached", {
} else if (!recoveryIsOk) {
logSpan.warn("4S is missing secrets: setting state to KEY_STORAGE_OUT_OF_SYNC", {
secretStorageStatus,
allCrossSigningSecretsCached,
isCurrentDeviceTrusted,
keyBackupDownloadIsOk,
});
await this.setDeviceState("key_storage_out_of_sync", logSpan);
} else if (!keyBackupDownloadIsOk) {
logSpan.warn("Backup key is not cached locally: setting state to KEY_STORAGE_OUT_OF_SYNC", {
secretStorageStatus,
allCrossSigningSecretsCached,
isCurrentDeviceTrusted,
keyBackupDownloadIsOk,
});
await this.setDeviceState("key_storage_out_of_sync", logSpan);
} else {
// We should not get here
logSpan.error("DeviceListenerCurrentDevice: allSystemsReady was false, but no case matched.");
}
}
}
apps/web/src/i18n/strings/en_EN.json
+6 -11
View File
@@ -2238,8 +2238,6 @@
"aliases_section": "Room Addresses",
"avatar_field_label": "Room avatar",
"canonical_alias_field_label": "Main address",
"default_url_previews_off": "URL previews are disabled by default for participants in this room.",
"default_url_previews_on": "URL previews are enabled by default for participants in this room.",
"description_space": "Edit settings relating to your space.",
"error_creating_alias_description": "There was an error creating that address. It may not be allowed by the server or a temporary failure occurred.",
"error_creating_alias_title": "Error creating address",
@@ -2270,12 +2268,7 @@
"published_aliases_explainer_space": "Published addresses can be used by anyone on any server to join your space.",
"published_aliases_section": "Published Addresses",
"save": "Save Changes",
"topic_field_label": "Room Topic",
"url_preview_encryption_warning": "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
"url_preview_explainer": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.",
"url_previews_section": "URL Previews",
"user_url_previews_default_off": "You have <a>disabled</a> URL previews by default.",
"user_url_previews_default_on": "You have <a>enabled</a> URL previews by default."
"topic_field_label": "Room Topic"
},
"notifications": {
"browse_button": "Browse",
@@ -2697,9 +2690,8 @@
"unable_to_load_msisdns": "Unable to load phone numbers",
"username": "Username"
},
"inline_url_previews_default": "Enable inline URL previews by default",
"inline_url_previews_room": "Enable URL previews by default for participants in this room",
"inline_url_previews_room_account": "Enable URL previews for this room (only affects you)",
"inline_url_previews_default": "Enable previews",
"inline_url_previews_encrypted": "Enable previews in encrypted rooms",
"insert_trailing_colon_mentions": "Insert a trailing colon after user mentions at the start of a message",
"invite_controls": {
"default_label": "Allow users to invite you to rooms"
@@ -2837,6 +2829,8 @@
"enable_tray_icon": "Show tray icon and minimise window to it on close",
"keyboard_heading": "Keyboard shortcuts",
"keyboard_view_shortcuts_button": "To view all keyboard shortcuts, <a>click here</a>.",
"link_previews_description": "Shows information about links underneath messages",
"link_previews_heading": "Link previews",
"media_heading": "Images, GIFs and videos",
"presence_description": "Share your activity and status with others.",
"publish_timezone": "Publish timezone on public profile",
@@ -4003,6 +3997,7 @@
"change_name_this_room": "Change the name of this room",
"change_topic_active_room": "Change the topic of your active room",
"change_topic_this_room": "Change the topic of this room",
"download_file": "Download files from the media repository",
"receive_membership_active_room": "See when people join, leave, or are invited to your active room",
"receive_membership_this_room": "See when people join, leave, or are invited to this room",
"remove_ban_invite_leave_active_room": "Remove, ban, or invite people to your active room, and make you leave",
apps/web/src/settings/Settings.tsx
+12 -11
View File
@@ -51,6 +51,7 @@ import MediaPreviewConfigController from "./controllers/MediaPreviewConfigContro
import InviteRulesConfigController from "./controllers/InviteRulesConfigController.ts";
import { type ComputedInviteConfig } from "../@types/invite-rules.ts";
import BlockInvitesConfigController from "./controllers/BlockInvitesConfigController.ts";
import RequiresSettingsController from "./controllers/RequiresSettingsController.ts";
export const defaultWatchManager = new WatchManager();
@@ -1140,22 +1141,22 @@ export const SETTINGS: Settings = {
controller: new UIFeatureController(UIFeature.AdvancedEncryption),
},
"urlPreviewsEnabled": {
supportedLevels: LEVELS_ROOM_SETTINGS_WITH_ROOM,
displayName: {
"default": _td("settings|inline_url_previews_default"),
"room-account": _td("settings|inline_url_previews_room_account"),
"room": _td("settings|inline_url_previews_room"),
},
// Enabled by default and client configurable as this setting only allows unencrypted
// messages to be previewed.
supportedLevels: [SettingLevel.DEVICE, SettingLevel.ACCOUNT, SettingLevel.CONFIG],
supportedLevelsAreOrdered: true,
displayName: _td("settings|inline_url_previews_default"),
default: true,
controller: new UIFeatureController(UIFeature.URLPreviews),
},
"urlPreviewsEnabled_e2ee": {
supportedLevels: [SettingLevel.ROOM_DEVICE],
displayName: {
"room-device": _td("settings|inline_url_previews_room_account"),
},
// Can only be enabled per-device to ensure neither the homeserver nor client config
// can impact the user's choices.
supportedLevels: [SettingLevel.DEVICE],
supportedLevelsAreOrdered: true,
displayName: _td("settings|inline_url_previews_encrypted"),
default: false,
controller: new UIFeatureController(UIFeature.URLPreviews),
controller: new RequiresSettingsController([UIFeature.URLPreviews, "urlPreviewsEnabled"]),
},
"notificationsEnabled": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
apps/web/src/settings/SettingsStore.ts
-43
View File
@@ -654,40 +654,6 @@ export default class SettingsStore {
return null;
}
/**
* Migrate the setting for URL previews in e2e rooms from room account
* data to the room device level.
*
* @param isFreshLogin True if the user has just logged in, false if a previous session is being restored.
*/
private static async migrateURLPreviewsE2EE(isFreshLogin: boolean): Promise<void> {
const MIGRATION_DONE_FLAG = "url_previews_e2ee_migration_done";
if (localStorage.getItem(MIGRATION_DONE_FLAG)) return;
if (isFreshLogin) return;
const client = MatrixClientPeg.safeGet();
while (!client.isInitialSyncComplete()) {
await new Promise((r) => client.once(ClientEvent.Sync, r));
}
logger.info("Performing one-time settings migration of URL previews in E2EE rooms");
const roomAccounthandler = LEVEL_HANDLERS[SettingLevel.ROOM_ACCOUNT];
for (const room of client.getRooms()) {
// We need to use the handler directly because this setting is no longer supported
// at this level at all
const val = roomAccounthandler.getValue("urlPreviewsEnabled_e2ee", room.roomId);
if (val !== undefined) {
await SettingsStore.setValue("urlPreviewsEnabled_e2ee", room.roomId, SettingLevel.ROOM_DEVICE, val);
}
}
localStorage.setItem(MIGRATION_DONE_FLAG, "true");
}
/**
* Migrate the setting for visible images to a setting.
*/
@@ -739,15 +705,6 @@ export default class SettingsStore {
* Runs or queues any setting migrations needed.
*/
public static runMigrations(isFreshLogin: boolean): void {
// This can be removed once enough users have run a version of Element with
// this migration. A couple of months after its release should be sufficient
// (so around October 2024).
// The consequences of missing the migration are only that URL previews will
// be disabled in E2EE rooms.
SettingsStore.migrateURLPreviewsE2EE(isFreshLogin).catch((e) => {
logger.error("Failed to migrate URL previews in E2EE rooms:", e);
});
// This can be removed once enough users have run a version of Element with
// this migration.
// The consequences of missing the migration are that previously shown images
apps/web/src/settings/controllers/RequiresSettingsController.ts
+34
View File
@@ -0,0 +1,34 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import SettingController from "./SettingController";
import SettingsStore from "../SettingsStore";
import type { BooleanSettingKey } from "../Settings.tsx";
/**
* Disables a setting & forces it's value if one or more settings are not enabled
*/
export default class RequiresSettingsController extends SettingController {
public constructor(
public readonly settingNames: BooleanSettingKey[],
private forcedValue = false,
) {
super();
}
public getValueOverride(): any {
if (this.settingDisabled) {
// per the docs: we force a disabled state when the feature isn't active
return this.forcedValue;
}
return null; // no override
}
public get settingDisabled(): boolean {
return this.settingNames.some((s) => !SettingsStore.getValue(s));
}
}
apps/web/src/settings/handlers/RoomAccountSettingsHandler.ts
-9
View File
@@ -76,15 +76,6 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
};
public getValue(settingName: string, roomId: string): any {
// Special case URL previews
if (settingName === "urlPreviewsEnabled") {
const content = this.getSettings(roomId, "org.matrix.room.preview_urls") || {};
// Check to make sure that we actually got a boolean
if (typeof content["disable"] !== "boolean") return null;
return !content["disable"];
}
// Special case allowed widgets
if (settingName === "allowedWidgets") {
return this.getSettings(roomId, ALLOWED_WIDGETS_EVENT_TYPE);
apps/web/src/utils/RoomUpgrade.ts
+5 -4
View File
@@ -10,13 +10,13 @@ import { ClientEvent, EventType, type MatrixClient, type Room } from "matrix-js-
import { KnownMembership } from "matrix-js-sdk/src/types";
import { logger } from "matrix-js-sdk/src/logger";
import { inviteMultipleToRoom, showAnyInviteErrors } from "../RoomInvite";
import { showAnyInviteErrors } from "../RoomInvite";
import Modal, { type IHandle } from "../Modal";
import { _t } from "../languageHandler";
import ErrorDialog from "../components/views/dialogs/ErrorDialog";
import SpaceStore from "../stores/spaces/SpaceStore";
import Spinner from "../components/views/elements/Spinner";
import type { MultiInviterOptions } from "./MultiInviter";
import MultiInviter, { type MultiInviterOptions } from "./MultiInviter";
export interface RoomUpgradeProgress {
roomUpgraded: boolean;
@@ -158,7 +158,8 @@ async function inviteUsersToRoom(
userIds: string[],
inviteOptions: MultiInviterOptions,
): Promise<void> {
const result = await inviteMultipleToRoom(client, roomId, userIds, inviteOptions);
const inviter = new MultiInviter(client, roomId, inviteOptions);
const states = await inviter.invite(userIds);
const room = client.getRoom(roomId)!;
showAnyInviteErrors(result.states, room, result.inviter);
showAnyInviteErrors(states, room, inviter);
}
apps/web/src/viewmodels/room-list/RoomListViewModel.ts
+10
View File
@@ -182,6 +182,16 @@ export class RoomListViewModel
// Update roomsMap immediately before clearing VMs
this.updateRoomsMap(this.roomsResult);
// When a filter is toggled on, expand sections that have results so they're visible
if (newFilter) {
for (const section of this.roomsResult.sections) {
if (section.rooms.length > 0) {
const sectionHeaderVM = this.roomSectionHeaderViewModels.get(section.tag);
if (sectionHeaderVM) sectionHeaderVM.isExpanded = true;
}
}
}
this.updateRoomListData();
};
apps/web/src/widgets/CapabilityText.tsx
+3
View File
@@ -57,6 +57,9 @@ export class CapabilityText {
[MatrixCapabilities.MSC2931Navigate]: {
[GENERIC_WIDGET_KIND]: _td("widget|capability|switch_room_message_user"),
},
[MatrixCapabilities.MSC4039DownloadFile]: {
[GENERIC_WIDGET_KIND]: _td("widget|capability|download_file"),
},
};
private static stateSendRecvCaps: SendRecvStaticCapText = {
apps/web/test/unit-tests/RoomInvite-test.ts
-33
View File
@@ -1,33 +0,0 @@
/*
Copyright 2025 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { getMockClientWithEventEmitter } from "../test-utils";
import { inviteMultipleToRoom } from "../../src/RoomInvite.tsx";
afterEach(() => {
jest.restoreAllMocks();
});
describe("inviteMultipleToRoom", () => {
it("can be called wth no `options`", async () => {
const client = getMockClientWithEventEmitter({});
const { states, inviter } = await inviteMultipleToRoom(client, "!room:id", []);
expect(states).toEqual({});
// @ts-ignore reference to private property
expect(inviter.options).toEqual({});
});
});
apps/web/test/unit-tests/audio/VoiceRecording-test.ts
+23
View File
@@ -120,6 +120,29 @@ describe("VoiceRecording", () => {
}),
);
});
it("should request the selected microphone as an exact device constraint", async () => {
MediaDeviceHandlerMock.getAudioInput.mockReturnValue("selected-mic");
await recording.start();
expect(navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith(
expect.objectContaining({
audio: expect.objectContaining({ deviceId: { exact: "selected-mic" } }),
}),
);
});
it("should not force an exact microphone when default device is selected", async () => {
MediaDeviceHandlerMock.getAudioInput.mockReturnValue("default");
await recording.start();
const constraints = mocked(navigator.mediaDevices.getUserMedia).mock.calls[0][0] as MediaStreamConstraints;
expect(constraints.audio).toEqual(
expect.not.objectContaining({
deviceId: expect.anything(),
}),
);
});
});
describe("when recording", () => {
apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx
+5 -7
View File
@@ -36,7 +36,7 @@ describe("PictureInPictureDragger", () => {
describe("when rendering the dragger with PiP content 1", () => {
beforeEach(() => {
renderResult = render(<PictureInPictureDragger draggable={true}>{mkContent1}</PictureInPictureDragger>);
renderResult = render(<PictureInPictureDragger>{mkContent1}</PictureInPictureDragger>);
});
it("should render the PiP content", () => {
@@ -45,7 +45,7 @@ describe("PictureInPictureDragger", () => {
describe("and rerendering PiP content 1", () => {
beforeEach(() => {
renderResult.rerender(<PictureInPictureDragger draggable={true}>{mkContent1}</PictureInPictureDragger>);
renderResult.rerender(<PictureInPictureDragger>{mkContent1}</PictureInPictureDragger>);
});
it("should not change the PiP content", () => {
@@ -55,7 +55,7 @@ describe("PictureInPictureDragger", () => {
describe("and rendering PiP content 2", () => {
beforeEach(() => {
renderResult.rerender(<PictureInPictureDragger draggable={true}>{mkContent2}</PictureInPictureDragger>);
renderResult.rerender(<PictureInPictureDragger>{mkContent2}</PictureInPictureDragger>);
});
it("should update the PiP content", () => {
@@ -66,9 +66,7 @@ describe("PictureInPictureDragger", () => {
describe("when rendering the dragger with PiP content 1 and 2", () => {
beforeEach(() => {
renderResult = render(
<PictureInPictureDragger draggable={true}>{[...mkContent1, ...mkContent2]}</PictureInPictureDragger>,
);
renderResult = render(<PictureInPictureDragger>{[...mkContent1, ...mkContent2]}</PictureInPictureDragger>);
});
it("should render both contents", () => {
@@ -83,7 +81,7 @@ describe("PictureInPictureDragger", () => {
beforeEach(() => {
clickSpy = jest.fn();
render(
<PictureInPictureDragger draggable={true}>
<PictureInPictureDragger>
{[
({ onStartMoving }) => (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
apps/web/test/unit-tests/components/structures/__snapshots__/PictureInPictureDragger-test.tsx.snap
+4
View File
@@ -3,6 +3,7 @@
exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and 2 should render both contents 1`] = `
<div>
<aside
class="mx_PictureInPictureDragger"
style="transform: translateX(672px) translateY(80px);"
>
<div>
@@ -20,6 +21,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rendering PiP content 2 should update the PiP content 1`] = `
<div>
<aside
class="mx_PictureInPictureDragger"
style="transform: translateX(672px) translateY(80px);"
>
<div>
@@ -34,6 +36,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rerendering PiP content 1 should not change the PiP content: pip-content-1 1`] = `
<div>
<aside
class="mx_PictureInPictureDragger"
style="transform: translateX(672px) translateY(80px);"
>
<div>
@@ -46,6 +49,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 should render the PiP content: pip-content-1 1`] = `
<div>
<aside
class="mx_PictureInPictureDragger"
style="transform: translateX(672px) translateY(80px);"
>
<div>
apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx
+22
View File
@@ -146,6 +146,28 @@ describe("<TextualBody />", () => {
expect(content).toMatchSnapshot();
});
it("keeps edited emote bodies inline with the sender", () => {
DMRoomMap.makeShared(defaultMatrixClient);
const ev = mkEvent({
type: "m.room.message",
room: room1Id,
user: "sender",
content: {
body: "winks",
msgtype: "m.emote",
},
event: true,
});
jest.spyOn(ev, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
const { container } = getComponent({ mxEvent: ev, replacingEventId: ev.getId() });
const annotated = container.querySelector(".mx_MEmoteBody > .mx_EventTile_annotatedInline");
expect(annotated).not.toBeNull();
expect(annotated?.tagName).toBe("DIV");
});
it("renders m.notice correctly", () => {
DMRoomMap.makeShared(defaultMatrixClient);
apps/web/test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx
-96
View File
@@ -1,96 +0,0 @@
/*
* Copyright 2024 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
import { render, screen } from "jest-matrix-react";
import { waitFor } from "@testing-library/dom";
import { Form } from "@vector-im/compound-web";
import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../../../test-utils";
import { UrlPreviewSettings } from "../../../../../src/components/views/room_settings/UrlPreviewSettings.tsx";
import SettingsStore from "../../../../../src/settings/SettingsStore.ts";
import dis from "../../../../../src/dispatcher/dispatcher.ts";
import { Action } from "../../../../../src/dispatcher/actions.ts";
describe("UrlPreviewSettings", () => {
let client: MatrixClient;
let room: Room;
beforeEach(() => {
client = createTestClient();
room = mkStubRoom("roomId", "room", client);
});
afterEach(() => {
jest.restoreAllMocks();
});
function renderComponent() {
return render(
<Form.Root>
<UrlPreviewSettings room={room} />
</Form.Root>,
withClientContextRenderOptions(client),
);
}
it("should display the correct preview when the setting is in a loading state", () => {
jest.spyOn(client, "getCrypto").mockReturnValue(undefined);
const { asFragment } = renderComponent();
expect(screen.getByText("URL Previews")).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
it("should display the correct preview when the room is encrypted and the url preview is enabled", async () => {
jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true);
const { asFragment } = renderComponent();
await waitFor(() => {
expect(
screen.getByText(
"In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
),
).toBeInTheDocument();
});
expect(asFragment()).toMatchSnapshot();
});
it("should display the correct preview when the room is unencrypted and the url preview is enabled", async () => {
jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true);
jest.spyOn(dis, "fire").mockReturnValue(undefined);
const { asFragment } = renderComponent();
await waitFor(() => {
expect(screen.getByRole("button", { name: "enabled" })).toBeInTheDocument();
expect(
screen.getByText("URL previews are enabled by default for participants in this room."),
).toBeInTheDocument();
});
expect(asFragment()).toMatchSnapshot();
screen.getByRole("button", { name: "enabled" }).click();
expect(dis.fire).toHaveBeenCalledWith(Action.ViewUserSettings);
});
it("should display the correct preview when the room is unencrypted and the url preview is disabled", async () => {
jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(false);
const { asFragment } = renderComponent();
await waitFor(() => {
expect(screen.getByRole("button", { name: "disabled" })).toBeInTheDocument();
expect(
screen.getByText("URL previews are disabled by default for participants in this room."),
).toBeInTheDocument();
});
expect(asFragment()).toMatchSnapshot();
});
});
apps/web/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap
-270
View File
@@ -1,270 +0,0 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`UrlPreviewSettings should display the correct preview when the room is encrypted and the url preview is enabled 1`] = `
<DocumentFragment>
<form
class="_root_19upo_16"
>
<fieldset
class="mx_SettingsFieldset"
>
<legend
class="mx_SettingsFieldset_legend"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_description"
>
<div
class="mx_SettingsSubsection_text"
>
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.
</p>
</div>
</div>
<div
class="mx_SettingsFieldset_content"
>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
Enable URL previews for this room (only affects you)
</label>
</div>
</div>
</div>
</fieldset>
</form>
</DocumentFragment>
`;
exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is disabled 1`] = `
<DocumentFragment>
<form
class="_root_19upo_16"
>
<fieldset
class="mx_SettingsFieldset"
>
<legend
class="mx_SettingsFieldset_legend"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_description"
>
<div
class="mx_SettingsSubsection_text"
>
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
<span>
You have
</span>
</p>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
disabled
</div>
URL previews by default.
<p />
</div>
</div>
<div
class="mx_SettingsFieldset_content"
>
<div>
URL previews are disabled by default for participants in this room.
</div>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
Enable inline URL previews by default
</label>
</div>
</div>
</div>
</fieldset>
</form>
</DocumentFragment>
`;
exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is enabled 1`] = `
<DocumentFragment>
<form
class="_root_19upo_16"
>
<fieldset
class="mx_SettingsFieldset"
>
<legend
class="mx_SettingsFieldset_legend"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_description"
>
<div
class="mx_SettingsSubsection_text"
>
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
<span>
You have
</span>
</p>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
enabled
</div>
URL previews by default.
<p />
</div>
</div>
<div
class="mx_SettingsFieldset_content"
>
<div>
URL previews are enabled by default for participants in this room.
</div>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
Enable inline URL previews by default
</label>
</div>
</div>
</div>
</fieldset>
</form>
</DocumentFragment>
`;
exports[`UrlPreviewSettings should display the correct preview when the setting is in a loading state 1`] = `
<DocumentFragment>
<form
class="_root_19upo_16"
>
<fieldset
class="mx_SettingsFieldset"
>
<legend
class="mx_SettingsFieldset_legend"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_content"
>
<svg
class="_icon_11k6c_18"
fill="currentColor"
height="1em"
style="width: 20px; height: 20px;"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
fill-rule="evenodd"
/>
</svg>
</div>
</fieldset>
</form>
</DocumentFragment>
`;
apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+118 -58
View File
@@ -905,9 +905,18 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Images, GIFs and videos
Link previews
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
Shows information about links underneath messages
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
@@ -923,7 +932,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<input
checked=""
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_vfGFMldL2r2v"
role="switch"
type="checkbox"
@@ -940,7 +948,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_vfGFMldL2r2v"
>
Enable inline URL previews by default
Enable previews
</label>
</div>
</div>
@@ -955,7 +963,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
>
<input
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_bsSwicmKUiOB"
role="switch"
type="checkbox"
@@ -972,10 +979,31 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_bsSwicmKUiOB"
>
Autoplay GIFs
Enable previews in encrypted rooms
</label>
</div>
</div>
</div>
</div>
</form>
<form
class="_root_19upo_16"
>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Images, GIFs and videos
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="_inline-field_19upo_32"
>
@@ -1003,6 +1031,38 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<label
class="_label_19upo_59"
for="mx_SettingsFlag_dvqsxEaZtl3A"
>
Autoplay GIFs
</label>
</div>
</div>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_NIiWzqsApP1c"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_NIiWzqsApP1c"
>
Autoplay videos
</label>
@@ -1029,39 +1089,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsection_content"
>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_NIiWzqsApP1c"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_NIiWzqsApP1c"
>
Show typing notifications
</label>
</div>
</div>
<div
class="_inline-field_19upo_32"
>
@@ -1091,7 +1118,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_q1SIAPqLMVXh"
>
Show a placeholder for removed messages
Show typing notifications
</label>
</div>
</div>
@@ -1124,7 +1151,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_dXFDGgBsKXay"
>
Show read receipts sent by other users
Show a placeholder for removed messages
</label>
</div>
</div>
@@ -1157,7 +1184,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_7Az0xw4Bs4Tt"
>
Show join/leave messages (invites/removes/bans unaffected)
Show read receipts sent by other users
</label>
</div>
</div>
@@ -1190,7 +1217,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_8jmzPIlPoBCv"
>
Show display name changes
Show join/leave messages (invites/removes/bans unaffected)
</label>
</div>
</div>
@@ -1223,7 +1250,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_enFRaTjdsFou"
>
Show chat effects (animations when receiving e.g. confetti)
Show display name changes
</label>
</div>
</div>
@@ -1256,7 +1283,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_bfwnd5rz4XNX"
>
Show profile picture changes
Show chat effects (animations when receiving e.g. confetti)
</label>
</div>
</div>
@@ -1289,7 +1316,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_gs5uWEzYzZrS"
>
Show avatars in user, room and event mentions
Show profile picture changes
</label>
</div>
</div>
@@ -1322,7 +1349,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_qWg7OgID1yRR"
>
Enable big emoji in chat
Show avatars in user, room and event mentions
</label>
</div>
</div>
@@ -1355,7 +1382,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="_label_19upo_59"
for="mx_SettingsFlag_pOPewl7rtMbV"
>
Jump to the bottom of the timeline when you send a message
Enable big emoji in chat
</label>
</div>
</div>
@@ -1387,6 +1414,39 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<label
class="_label_19upo_59"
for="mx_SettingsFlag_cmt3PZSyNp3v"
>
Jump to the bottom of the timeline when you send a message
</label>
</div>
</div>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_dJJz3lHUv9XX"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_dJJz3lHUv9XX"
>
Show current profile picture and name for users in message history
</label>
@@ -1424,7 +1484,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
>
<input
class="_input_udcm8_24"
id="_r_24_"
id="_r_26_"
role="switch"
type="checkbox"
/>
@@ -1438,7 +1498,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
>
<label
class="_label_19upo_59"
for="_r_24_"
for="_r_26_"
>
Hide avatars of room and inviter
</label>
@@ -1452,13 +1512,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
>
<label
class="_label_19upo_59"
for="radix-_r_26_"
for="radix-_r_28_"
>
Show media in timeline
</label>
<span
class="_message_19upo_85 _help-message_19upo_91 mx_MediaPreviewAccountSetting_RadioHelp"
id="radix-_r_27_"
id="radix-_r_29_"
>
A hidden media can always be shown by tapping on it
</span>
@@ -1571,7 +1631,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
checked=""
class="_input_udcm8_24"
disabled=""
id="_r_2b_"
id="_r_2d_"
role="switch"
type="checkbox"
/>
@@ -1585,13 +1645,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
>
<label
class="_label_19upo_59"
for="_r_2b_"
for="_r_2d_"
>
Allow users to invite you to rooms
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_2d_"
id="radix-_r_2f_"
>
Your server does not implement this feature.
</span>
@@ -1636,7 +1696,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<input
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_dJJz3lHUv9XX"
id="mx_SettingsFlag_SBSSOZDRlzlA"
role="switch"
type="checkbox"
/>
@@ -1650,7 +1710,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_dJJz3lHUv9XX"
for="mx_SettingsFlag_SBSSOZDRlzlA"
>
Show NSFW content
</label>
@@ -1690,7 +1750,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
checked=""
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_SBSSOZDRlzlA"
id="mx_SettingsFlag_FLEpLCb0jpp6"
role="switch"
type="checkbox"
/>
@@ -1704,7 +1764,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_SBSSOZDRlzlA"
for="mx_SettingsFlag_FLEpLCb0jpp6"
>
Prompt before sending invites to potentially invalid matrix IDs
</label>
apps/web/test/unit-tests/settings/SettingsStore-test.ts
-45
View File
@@ -96,63 +96,18 @@ describe("SettingsStore", () => {
describe("runMigrations", () => {
let client: MatrixClient;
let room: Room;
let localStorageSetItemSpy: jest.SpyInstance;
let localStorageSetPromise: Promise<void>;
beforeEach(() => {
client = stubClient();
room = mkStubRoom("!room:example.org", "Room", client);
room.getAccountData = jest.fn().mockReturnValue({
getContent: jest.fn().mockReturnValue({
urlPreviewsEnabled_e2ee: true,
}),
});
client.getRooms = jest.fn().mockReturnValue([room]);
client.getRoom = jest.fn().mockReturnValue(room);
localStorageSetPromise = new Promise((resolve) => {
localStorageSetItemSpy = jest
.spyOn(localStorage.__proto__, "setItem")
.mockImplementation(() => resolve());
});
});
afterEach(() => {
jest.restoreAllMocks();
});
it("migrates URL previews setting for e2ee rooms", async () => {
SettingsStore.runMigrations(false);
client.emit(ClientEvent.Sync, SyncState.Prepared, null);
expect(room.getAccountData).toHaveBeenCalled();
await localStorageSetPromise;
expect(localStorageSetItemSpy!).toHaveBeenCalledWith(
`mx_setting_urlPreviewsEnabled_e2ee_${room.roomId}`,
JSON.stringify({ value: true }),
);
});
it("does not migrate e2ee URL previews on a fresh login", async () => {
SettingsStore.runMigrations(true);
client.emit(ClientEvent.Sync, SyncState.Prepared, null);
expect(room.getAccountData).not.toHaveBeenCalled();
});
it("does not migrate if the device is flagged as migrated", async () => {
jest.spyOn(localStorage.__proto__, "getItem").mockImplementation((key: unknown): string | undefined => {
if (key === "url_previews_e2ee_migration_done") return JSON.stringify({ value: true });
return undefined;
});
SettingsStore.runMigrations(false);
client.emit(ClientEvent.Sync, SyncState.Prepared, null);
expect(room.getAccountData).not.toHaveBeenCalled();
});
describe("Migrate media preview configuration", () => {
beforeEach(() => {
MatrixClientBackedController.matrixClient = client;
apps/web/test/unit-tests/settings/controllers/RequiresSettingsController-test.ts
+33
View File
@@ -0,0 +1,33 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import RequiresSettingsController from "../../../../src/settings/controllers/RequiresSettingsController";
import { SettingLevel } from "../../../../src/settings/SettingLevel";
import SettingsStore from "../../../../src/settings/SettingsStore";
describe("RequiresSettingsController", () => {
afterEach(() => {
SettingsStore.reset();
});
it("forces a value if a setting is false", async () => {
const forcedValue = true;
await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
await SettingsStore.setValue("useCustomFontSize", null, SettingLevel.DEVICE, false);
const controller = new RequiresSettingsController(["useCompactLayout", "useCustomFontSize"], forcedValue);
expect(controller.settingDisabled).toEqual(true);
expect(controller.getValueOverride()).toEqual(forcedValue);
});
it("does not force a value if all settings are true", async () => {
const controller = new RequiresSettingsController(["useCompactLayout", "useCustomFontSize"]);
await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
await SettingsStore.setValue("useCustomFontSize", null, SettingLevel.DEVICE, true);
expect(controller.settingDisabled).toEqual(false);
expect(controller.getValueOverride()).toEqual(null);
});
});
apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx
+27
View File
@@ -885,6 +885,33 @@ describe("RoomListViewModel", () => {
expect(snapshot.sections[0].roomIds).toEqual(["!fav1:server"]);
});
it("should expand collapsed sections that have results when a filter is toggled on", () => {
viewModel = new RoomListViewModel({ client: matrixClient });
// Collapse the favourite section
const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
favHeader.onClick();
expect(favHeader.isExpanded).toBe(false);
// Toggle a filter that returns rooms in the favourite section
jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
spaceId: "home",
sections: [
{ tag: DefaultTagID.Favourite, rooms: [favRoom1] },
{ tag: CHATS_TAG, rooms: [] },
{ tag: DefaultTagID.LowPriority, rooms: [] },
],
filterKeys: [FilterEnum.UnreadFilter],
});
viewModel.onToggleFilter("unread");
// The favourite section should be expanded and its rooms visible
expect(favHeader.isExpanded).toBe(true);
const snapshot = viewModel.getSnapshot();
const favSection = snapshot.sections.find((s) => s.id === DefaultTagID.Favourite);
expect(favSection!.roomIds).toEqual(["!fav1:server"]);
});
it("should apply sticky room within the correct section", async () => {
stubClient();
viewModel = new RoomListViewModel({ client: matrixClient });