diff --git a/package.json b/package.json index 04ce683f30a..0dee0fe5b47 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "@types/png-chunks-extract": "^1.0.2", "@types/react-virtualized": "^9.21.30", "@vector-im/compound-design-tokens": "^5.0.0", - "@vector-im/compound-web": "^8.1.2", + "@vector-im/compound-web": "^8.2.0", "@vector-im/matrix-wysiwyg": "2.38.4", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", diff --git a/playwright/e2e/create-room/create-room.spec.ts b/playwright/e2e/create-room/create-room.spec.ts deleted file mode 100644 index 087a89e68dc..00000000000 --- a/playwright/e2e/create-room/create-room.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2022, 2023 The Matrix.org Foundation C.I.C. - -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 { test, expect } from "../../element-web-test"; - -test.describe("Create Room", () => { - test.use({ displayName: "Jim" }); - - test("should allow us to create a public room with name, topic & address set", async ({ page, user, app }) => { - const name = "Test room 1"; - const topic = "This room is dedicated to this test and this test only!"; - - const dialog = await app.openCreateRoomDialog(); - // Fill name & topic - await dialog.getByRole("textbox", { name: "Name" }).fill(name); - await dialog.getByRole("textbox", { name: "Topic" }).fill(topic); - // Change room to public - await dialog.getByRole("button", { name: "Room visibility" }).click(); - await dialog.getByRole("option", { name: "Public room" }).click(); - // Fill room address - await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1"); - // Submit - await dialog.getByRole("button", { name: "Create room" }).click(); - - await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`)); - const header = page.locator(".mx_RoomHeader"); - await expect(header).toContainText(name); - }); -}); diff --git a/playwright/e2e/crypto/toasts.spec.ts b/playwright/e2e/crypto/toasts.spec.ts index 7b838edaacd..592076afa01 100644 --- a/playwright/e2e/crypto/toasts.spec.ts +++ b/playwright/e2e/crypto/toasts.spec.ts @@ -126,7 +126,7 @@ test.describe("'Turn on key storage' toast", () => { await toast.getByRole("button", { name: "Continue" }).click(); // Then we see the Encryption settings dialog with an option to turn on key storage - await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible(); + await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible(); // And when we close that await page.getByRole("button", { name: "Close dialog" }).click(); @@ -153,7 +153,7 @@ test.describe("'Turn on key storage' toast", () => { await page.getByRole("button", { name: "Go to Settings" }).click(); // Then we see Encryption settings again - await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible(); + await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible(); // And when we close that, see the toast, click Dismiss, and Yes, Dismiss await page.getByRole("button", { name: "Close dialog" }).click(); diff --git a/playwright/e2e/crypto/utils.ts b/playwright/e2e/crypto/utils.ts index 289b123e86e..12640bfb3ef 100644 --- a/playwright/e2e/crypto/utils.ts +++ b/playwright/e2e/crypto/utils.ts @@ -300,9 +300,9 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle { const encryptionTab = await app.settings.openUserSettings("Encryption"); - const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" }); + const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" }); if (!(await keyStorageToggle.isChecked())) { - await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click(); + await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click(); } await encryptionTab.getByRole("button", { name: "Set up recovery" }).click(); @@ -323,11 +323,11 @@ export async function enableKeyBackup(app: ElementAppPage): Promise { export async function disableKeyBackup(app: ElementAppPage): Promise { const encryptionTab = await app.settings.openUserSettings("Encryption"); - const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" }); + const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" }); if (await keyStorageToggle.isChecked()) { - await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click(); + await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click(); await encryptionTab.getByRole("button", { name: "Delete key storage" }).click(); - await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible(); + await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible(); // Wait for the update to account data to stick await new Promise((resolve) => setTimeout(resolve, 2000)); diff --git a/playwright/e2e/devtools/devtools.spec.ts b/playwright/e2e/devtools/devtools.spec.ts new file mode 100644 index 00000000000..213be32cd0c --- /dev/null +++ b/playwright/e2e/devtools/devtools.spec.ts @@ -0,0 +1,31 @@ +/* +Copyright 2025 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 { test, expect } from "../../element-web-test"; + +test.describe("Devtools", () => { + test.use({ + displayName: "Alice", + }); + + test("should render the devtools", { tag: "@screenshot" }, async ({ page, homeserver, user, app }) => { + await app.client.createRoom({ name: "Test Room" }); + await app.viewRoomByName("Test Room"); + + const composer = app.getComposer().locator("[contenteditable]"); + await composer.fill("/devtools"); + await composer.press("Enter"); + const dialog = page.locator(".mx_Dialog"); + await dialog.getByLabel("Developer mode").check(); + + await expect(dialog).toMatchScreenshot("devtools-dialog.png", { + css: `.mx_CopyableText { + display: none; + }`, + }); + }); +}); diff --git a/playwright/e2e/devtools/upgraderoom.spec.ts b/playwright/e2e/devtools/upgraderoom.spec.ts new file mode 100644 index 00000000000..e7288ba2646 --- /dev/null +++ b/playwright/e2e/devtools/upgraderoom.spec.ts @@ -0,0 +1,31 @@ +/* +Copyright 2025 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 { SettingLevel } from "../../../src/settings/SettingLevel"; +import { test, expect } from "../../element-web-test"; + +test.describe("Room upgrade dialog", () => { + test.use({ + displayName: "Alice", + }); + + test("should render the room upgrade dialog", { tag: "@screenshot" }, async ({ page, homeserver, user, app }) => { + // Enable developer mode + await app.settings.setValue("developerMode", null, SettingLevel.ACCOUNT, true); + + await app.client.createRoom({ name: "Test Room" }); + await app.viewRoomByName("Test Room"); + + const composer = app.getComposer().locator("[contenteditable]"); + // Pick a room version that is likely to be supported by all our target homeservers. + await composer.fill("/upgraderoom 5"); + await composer.press("Enter"); + const dialog = page.locator(".mx_Dialog"); + await dialog.getByLabel("Automatically invite members from this room to the new one").check(); + await expect(dialog).toMatchScreenshot("upgrade-room.png"); + }); +}); diff --git a/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts b/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts new file mode 100644 index 00000000000..82a65f4272f --- /dev/null +++ b/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts @@ -0,0 +1,25 @@ +/* +Copyright 2025 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 { test, expect } from "../../element-web-test"; + +test.describe("Decline and block invite dialog", function () { + test.use({ + displayName: "Hanako", + }); + + test( + "should show decline and block dialog for a room", + { tag: "@screenshot" }, + async ({ page, app, user, bot }) => { + await bot.createRoom({ name: "Test Room", invite: [user.userId] }); + await app.viewRoomByName("Test Room"); + await page.getByRole("button", { name: "Decline and block" }).click(); + await expect(page.locator(".mx_Dialog")).toMatchScreenshot("decline-and-block-invite-empty.png"); + }, + ); +}); diff --git a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts index 1f965ffb8fb..e2eb891024b 100644 --- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts +++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts @@ -402,7 +402,9 @@ test.describe("Room list", () => { await app.settings.closeDialog(); await app.settings.openUserSettings("Notifications"); - await page.getByText("Show all activity in the room list (dots or number of unread messages)").click(); + await page + .getByRole("switch", { name: "Show all activity in the room list (dots or number of unread messages)" }) + .check(); await app.settings.closeDialog(); // Switch to the other room to avoid the notification to be cleared diff --git a/playwright/e2e/location/location.spec.ts b/playwright/e2e/location/location.spec.ts index 52afd5e173d..29bc502355a 100644 --- a/playwright/e2e/location/location.spec.ts +++ b/playwright/e2e/location/location.spec.ts @@ -1,5 +1,5 @@ /* -Copyright 2024 New Vector Ltd. +Copyright 2024, 2025 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial @@ -57,4 +57,20 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => { await expect(page.locator(".mx_Marker")).toBeVisible(); }); + + test( + "is prompted for and can consent to live location sharing", + { tag: "@screenshot" }, + async ({ page, user, app }) => { + await app.viewRoomById(await app.client.createRoom({})); + + const composerOptions = await app.openMessageComposerOptions(); + await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click(); + const menu = page.locator(".mx_LocationShareMenu"); + + await menu.getByRole("button", { name: "My live location" }).click(); + await menu.getByLabel("Enable live location sharing").check(); + await expect(menu).toMatchScreenshot("location-live-share-dialog.png"); + }, + ); }); diff --git a/playwright/e2e/room-directory/room-directory.spec.ts b/playwright/e2e/room-directory/room-directory.spec.ts index 8f90ef4b7ef..741fde3505a 100644 --- a/playwright/e2e/room-directory/room-directory.spec.ts +++ b/playwright/e2e/room-directory/room-directory.spec.ts @@ -38,12 +38,11 @@ test.describe("Room Directory", () => { // Publish into the public rooms directory const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" }); await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue(`#gaming:${user.homeServer}`); - const checkbox = publishedAddresses - .locator(".mx_SettingsFlag", { - hasText: `Publish this room to the public in ${user.homeServer}'s room directory?`, - }) - .getByRole("switch"); - await checkbox.check(); + const checkbox = publishedAddresses.getByRole("switch", { + name: `Publish this room to the public in ${user.homeServer}'s room directory?`, + }); + // .click() rather than .check() as checking happens after publish + await checkbox.click(); await expect(checkbox).toBeChecked(); await app.closeDialog(); diff --git a/playwright/e2e/room/create-room.spec.ts b/playwright/e2e/room/create-room.spec.ts new file mode 100644 index 00000000000..22cec12f996 --- /dev/null +++ b/playwright/e2e/room/create-room.spec.ts @@ -0,0 +1,64 @@ +/* +Copyright 2025 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 { SettingLevel } from "../../../src/settings/SettingLevel"; +import { test, expect } from "../../element-web-test"; + +const name = "Test room"; +const topic = "A decently explanatory topic for a test room."; + +test.describe("Create Room", () => { + test.use({ displayName: "Jim" }); + + test( + "should create a public room with name, topic & address set", + { tag: "@screenshot" }, + async ({ page, user, app }) => { + const dialog = await app.openCreateRoomDialog(); + // Fill name & topic + await dialog.getByRole("textbox", { name: "Name" }).fill(name); + await dialog.getByRole("textbox", { name: "Topic" }).fill(topic); + // Change room to public + await dialog.getByRole("button", { name: "Room visibility" }).click(); + await dialog.getByRole("option", { name: "Public room" }).click(); + // Fill room address + await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-standard"); + // Snapshot it + await expect(dialog).toMatchScreenshot("create-room.png"); + + // Submit + await dialog.getByRole("button", { name: "Create room" }).click(); + + await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-standard:${user.homeServer}`)); + const header = page.locator(".mx_RoomHeader"); + await expect(header).toContainText(name); + }, + ); + + test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => { + await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true); + + const dialog = await app.openCreateRoomDialog("New video room"); + // Fill name & topic + await dialog.getByRole("textbox", { name: "Name" }).fill(name); + await dialog.getByRole("textbox", { name: "Topic" }).fill(topic); + // Change room to public + await dialog.getByRole("button", { name: "Room visibility" }).click(); + await dialog.getByRole("option", { name: "Public room" }).click(); + // Fill room address + await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-video"); + // Snapshot it + await expect(dialog).toMatchScreenshot("create-video-room.png"); + + // Submit + await dialog.getByRole("button", { name: "Create video room" }).click(); + + await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-video:${user.homeServer}`)); + const header = page.locator(".mx_RoomHeader"); + await expect(header).toContainText(name); + }); +}); diff --git a/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts b/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts index 53f9c37dd01..df41ef4b702 100644 --- a/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts +++ b/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts @@ -50,8 +50,8 @@ test.describe("Appearance user settings tab", () => { // Click "Show advanced" link button await tab.getByRole("button", { name: "Show advanced" }).click(); - await tab.getByLabel("Use bundled emoji font").click(); - await tab.getByLabel("Use a system font").click(); + await tab.getByRole("switch", { name: "Use bundled emoji font" }).click(); + await tab.getByRole("switch", { name: "Use a system font" }).click(); // Assert that the font-family value was removed await expect(page.locator("body")).toHaveCSS("font-family", '""'); diff --git a/playwright/e2e/settings/appearance-user-settings-tab/index.ts b/playwright/e2e/settings/appearance-user-settings-tab/index.ts index 29e51fb0ddc..15f2f478884 100644 --- a/playwright/e2e/settings/appearance-user-settings-tab/index.ts +++ b/playwright/e2e/settings/appearance-user-settings-tab/index.ts @@ -84,8 +84,8 @@ class Helpers { /** * Return the system theme toggle */ - getMatchSystemThemeCheckbox() { - return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" }); + getMatchSystemThemeSwitch() { + return this.getThemePanel().getByRole("switch", { name: "Match system theme" }); } /** @@ -216,10 +216,10 @@ class Helpers { } /** - * Return the compact layout checkbox + * Return the compact layout switch */ - getCompactLayoutCheckbox() { - return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" }); + getCompactLayoutSwitch() { + return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" }); } /** diff --git a/playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.spec.ts b/playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.spec.ts index ce0d614d905..3c05487723a 100644 --- a/playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.spec.ts +++ b/playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.spec.ts @@ -40,9 +40,9 @@ test.describe("Appearance user settings tab", () => { ); test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => { - await expect(util.getCompactLayoutCheckbox()).not.toBeChecked(); + await expect(util.getCompactLayoutSwitch()).not.toBeChecked(); - await util.getCompactLayoutCheckbox().click(); + await util.getCompactLayoutSwitch().click(); await util.assertCompactLayout(); }); @@ -52,11 +52,11 @@ test.describe("Appearance user settings tab", () => { user, util, }) => { - await expect(util.getCompactLayoutCheckbox()).not.toBeDisabled(); + await expect(util.getCompactLayoutSwitch()).not.toBeDisabled(); // Select the bubble layout, which should disable the compact layout checkbox await util.getBubbleLayout().click(); - await expect(util.getCompactLayoutCheckbox()).toBeDisabled(); + await expect(util.getCompactLayoutSwitch()).toBeDisabled(); }); }); }); diff --git a/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts b/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts index 1fad16948d2..7198e1fd82c 100644 --- a/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts +++ b/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts @@ -25,7 +25,7 @@ test.describe("Appearance user settings tab", () => { { tag: "@screenshot" }, async ({ page, app, util }) => { // Assert that 'Match system theme' is not checked - await expect(util.getMatchSystemThemeCheckbox()).not.toBeChecked(); + await expect(util.getMatchSystemThemeSwitch()).not.toBeChecked(); // Assert that the light theme is selected await expect(util.getLightTheme()).toBeChecked(); @@ -41,7 +41,7 @@ test.describe("Appearance user settings tab", () => { "should disable the themes when the system theme is clicked", { tag: "@screenshot" }, async ({ page, app, util }) => { - await util.getMatchSystemThemeCheckbox().click(); + await util.getMatchSystemThemeSwitch().click(); // Assert that the themes are disabled await expect(util.getLightTheme()).toBeDisabled(); diff --git a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts index ed1daecf350..73bb48e2f69 100644 --- a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts +++ b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts @@ -117,7 +117,7 @@ test.describe("Encryption tab", () => { await verifySession(app, recoveryKey.encodedPrivateKey); await util.openEncryptionTab(); - await page.getByRole("checkbox", { name: "Allow key storage" }).click(); + await page.getByRole("switch", { name: "Allow key storage" }).click(); await expect( page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }), @@ -136,7 +136,7 @@ test.describe("Encryption tab", () => { await page.getByRole("button", { name: "Delete key storage" }).click(); - await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked(); + await expect(page.getByRole("switch", { name: "Allow key storage" })).not.toBeChecked(); for (const prom of deleteRequestPromises) { const request = await prom; diff --git a/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts b/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts new file mode 100644 index 00000000000..1770bb3df89 --- /dev/null +++ b/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts @@ -0,0 +1,25 @@ +/* +Copyright 2025 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 { test, expect } from "../../../element-web-test"; +import { SettingLevel } from "../../../../src/settings/SettingLevel"; + +test.describe("Notifications 2 tab", () => { + test.use({ + displayName: "Alice", + }); + + test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user }) => { + await app.settings.setValue("feature_notification_settings2", null, SettingLevel.DEVICE, true); + await page.setViewportSize({ width: 1024, height: 2000 }); + const settings = await app.settings.openUserSettings("Notifications"); + await expect(settings).toMatchScreenshot("standard-notifications-2-settings.png", { + // Mask the mxid. + mask: [settings.locator("#mx_NotificationSettings2_MentionCheckbox span")], + }); + }); +}); diff --git a/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts b/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts new file mode 100644 index 00000000000..df2f7e51e7f --- /dev/null +++ b/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts @@ -0,0 +1,22 @@ +/* +Copyright 2025 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 { test, expect } from "../../../element-web-test"; + +test.describe("Notifications tab", () => { + test.use({ + displayName: "Alice", + }); + + test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user }) => { + await page.setViewportSize({ width: 1024, height: 1400 }); + const settings = await app.settings.openUserSettings("Notifications"); + await settings.getByLabel("Enable notifications for this account").check(); + await settings.getByLabel("Enable notifications for this device").check(); + await expect(settings).toMatchScreenshot("standard-notification-settings.png"); + }); +}); diff --git a/playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts b/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts similarity index 97% rename from playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts rename to playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts index 06ee25e9cb0..d287234af54 100644 --- a/playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts +++ b/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts @@ -8,7 +8,7 @@ import { type Locator } from "@playwright/test"; -import { test, expect } from "../../element-web-test"; +import { test, expect } from "../../../element-web-test"; test.describe("Roles & Permissions room settings tab", () => { const roomName = "Test room"; diff --git a/playwright/e2e/settings/room-settings/room-security-tab.spec.ts b/playwright/e2e/settings/room-settings/room-security-tab.spec.ts new file mode 100644 index 00000000000..914655328d3 --- /dev/null +++ b/playwright/e2e/settings/room-settings/room-security-tab.spec.ts @@ -0,0 +1,41 @@ +/* + * Copyright 2025 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 { type Locator } from "@playwright/test"; + +import { test, expect } from "../../../element-web-test"; + +test.describe("Roles & Permissions room settings tab", () => { + const roomName = "Test room"; + + test.use({ + displayName: "Alice", + }); + + let settings: Locator; + + test.beforeEach(async ({ user, app }) => { + await app.client.createRoom({ name: roomName }); + await app.viewRoomByName(roomName); + settings = await app.settings.openRoomSettings("Security & Privacy"); + }); + + test("should be able to toggle on encryption in a room", { tag: "@screenshot" }, async ({ page, app, user }) => { + await page.setViewportSize({ width: 1024, height: 1400 }); + const encryptedToggle = settings.getByLabel("Encrypted"); + await encryptedToggle.click(); + + // Accept the dialog. + await page.getByRole("button", { name: "Ok " }).click(); + + await expect(encryptedToggle).toBeChecked(); + await expect(encryptedToggle).toBeDisabled(); + + await settings.getByLabel("Only send messages to verified users.").check(); + await expect(settings).toMatchScreenshot("room-security-settings.png"); + }); +}); diff --git a/playwright/e2e/settings/room-settings/room-video-tab.spec.ts b/playwright/e2e/settings/room-settings/room-video-tab.spec.ts new file mode 100644 index 00000000000..fdd14067820 --- /dev/null +++ b/playwright/e2e/settings/room-settings/room-video-tab.spec.ts @@ -0,0 +1,40 @@ +/* + * Copyright 2025 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 { type Locator } from "@playwright/test"; + +import { test, expect } from "../../../element-web-test"; +import { SettingLevel } from "../../../../src/settings/SettingLevel"; + +test.describe("Voice & Video room settings tab", () => { + const roomName = "Test room"; + + test.use({ + displayName: "Alice", + }); + + let settings: Locator; + + test.beforeEach(async ({ user, app, page }) => { + // Execute client actions before setting, as the setting will force a reload. + await app.client.createRoom({ name: roomName }); + await app.settings.setValue("feature_group_calls", null, SettingLevel.DEVICE, true); + await app.viewRoomByName(roomName); + settings = await app.settings.openRoomSettings("Voice & Video"); + }); + + test( + "should be able to toggle on Element Call in the room", + { tag: "@screenshot" }, + async ({ page, app, user }) => { + await page.setViewportSize({ width: 1024, height: 1400 }); + const callToggle = settings.getByLabel("Enable Element Call as an additional calling option in this room"); + await callToggle.check(); + await expect(settings).toMatchScreenshot("room-video-settings.png"); + }, + ); +}); diff --git a/playwright/e2e/settings/security-user-settings-tab.spec.ts b/playwright/e2e/settings/security-user-settings-tab.spec.ts index 25bf1a9dbed..377cae74958 100644 --- a/playwright/e2e/settings/security-user-settings-tab.spec.ts +++ b/playwright/e2e/settings/security-user-settings-tab.spec.ts @@ -41,6 +41,18 @@ test.describe("Security user settings tab", () => { }); }); + test("should render the security tab", { tag: "@screenshot" }, async ({ app, page, user }) => { + await page.setViewportSize({ width: 1024, height: 1400 }); + const tab = await app.settings.openUserSettings("Security"); + await expect(tab).toMatchScreenshot("security-settings-tab.png", { + mask: [ + // Contains IM name. + tab.locator("#mx_SetIntegrationManager_BodyText"), + tab.locator("#mx_SetIntegrationManager_ManagerName"), + ], + }); + }); + test("should be able to set an ID server", async ({ app, context, user, page }) => { const tab = await app.settings.openUserSettings("Security"); diff --git a/playwright/e2e/sliding-sync/sliding-sync.spec.ts b/playwright/e2e/sliding-sync/sliding-sync.spec.ts index b540cd11d51..7879887daa3 100644 --- a/playwright/e2e/sliding-sync/sliding-sync.spec.ts +++ b/playwright/e2e/sliding-sync/sliding-sync.spec.ts @@ -180,11 +180,9 @@ test.describe("Sliding Sync", () => { test("should update user settings promptly", async ({ page, app }) => { await app.settings.openUserSettings("Preferences"); - const locator = page.locator(".mx_SettingsFlag").filter({ hasText: "Show timestamps in 12 hour format" }); + const locator = page.getByRole("switch", { name: "Show timestamps in 12 hour format" }); await expect(locator).toBeVisible(); - await expect(locator.locator(".mx_ToggleSwitch_on")).not.toBeAttached(); - await locator.locator(".mx_ToggleSwitch_ball").click(); - await expect(locator.locator(".mx_ToggleSwitch_on")).toBeAttached(); + await locator.check(); }); test("should send subscribe_rooms on room switch if room not already subscribed", async ({ page, app }) => { diff --git a/playwright/e2e/spaces/spaces.spec.ts b/playwright/e2e/spaces/spaces.spec.ts index 56c8ae22b82..f8e5bb3476c 100644 --- a/playwright/e2e/spaces/spaces.spec.ts +++ b/playwright/e2e/spaces/spaces.spec.ts @@ -369,4 +369,16 @@ test.describe("Spaces", () => { await app.viewSpaceByName("Root Space"); await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png"); }); + + test("should render spaces visibility settings", { tag: "@screenshot" }, async ({ page, app, user, bot }) => { + await app.client.createSpace({ + name: "My Space", + }); + await app.viewSpaceByName("My space"); + await page.getByLabel("Settings", { exact: true }).click(); + await app.settings.switchTab("Visibility"); + await expect(page.locator("#mx_tabpanel_SPACE_VISIBILITY_TAB")).toMatchScreenshot( + "space-visibility-settings.png", + ); + }); }); diff --git a/playwright/e2e/widgets/permissions-dialog.spec.ts b/playwright/e2e/widgets/permissions-dialog.spec.ts new file mode 100644 index 00000000000..ad282403c75 --- /dev/null +++ b/playwright/e2e/widgets/permissions-dialog.spec.ts @@ -0,0 +1,95 @@ +/* +Copyright 2025 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 { test, expect } from "../../element-web-test"; + +const DEMO_WIDGET_ID = "demo-widget-id"; +const DEMO_WIDGET_NAME = "Demo Widget"; +const DEMO_WIDGET_TYPE = "demo"; +const ROOM_NAME = "Demo"; + +const DEMO_WIDGET_HTML = ` + + + Demo Widget + + + +`; + +test.describe("Widger permissions dialog", () => { + test.use({ + displayName: "Mike", + }); + + let demoWidgetUrl: string; + test.beforeEach(async ({ webserver }) => { + demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML); + }); + + test( + "should be updated if user is re-invited into the room with updated state event", + { tag: "@screenshot" }, + async ({ page, app, user }) => { + const roomId = await app.client.createRoom({ + name: ROOM_NAME, + }); + + // setup widget via state event + await app.client.sendStateEvent( + roomId, + "im.vector.modular.widgets", + { + id: DEMO_WIDGET_ID, + creatorUserId: "somebody", + type: DEMO_WIDGET_TYPE, + name: DEMO_WIDGET_NAME, + url: demoWidgetUrl, + }, + DEMO_WIDGET_ID, + ); + + // set initial layout + await app.client.sendStateEvent( + roomId, + "io.element.widgets.layout", + { + widgets: { + [DEMO_WIDGET_ID]: { + container: "top", + index: 1, + width: 100, + height: 0, + }, + }, + }, + "", + ); + + // open the room + await app.viewRoomByName(ROOM_NAME); + await expect(page.locator(".mx_WidgetCapabilitiesPromptDialog")).toMatchScreenshot( + "widget-capabilites-prompt.png", + ); + }, + ); +}); diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts index afc814b3e10..5d72703d064 100644 --- a/playwright/pages/ElementAppPage.ts +++ b/playwright/pages/ElementAppPage.ts @@ -51,9 +51,9 @@ export class ElementAppPage { /** * Open room creation dialog. */ - public async openCreateRoomDialog(): Promise { + public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise { await this.page.getByRole("button", { name: "Add room", exact: true }).click(); - await this.page.getByRole("menuitem", { name: "New room", exact: true }).click(); + await this.page.getByRole("menuitem", { name: roomKindname, exact: true }).click(); return this.page.locator(".mx_CreateRoomDialog"); } diff --git a/playwright/pages/settings.ts b/playwright/pages/settings.ts index a08ca65f345..0ea8c50348c 100644 --- a/playwright/pages/settings.ts +++ b/playwright/pages/settings.ts @@ -43,7 +43,7 @@ export class Settings { * @param {*} value The new value of the setting, may be null. * @return {Promise} Resolves when the setting has been changed. */ - public async setValue(settingName: string, roomId: string, level: SettingLevel, value: any): Promise { + public async setValue(settingName: string, roomId: string | null, level: SettingLevel, value: any): Promise { return this.page.evaluate< Promise, { diff --git a/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png b/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png new file mode 100644 index 00000000000..1ad85e8a52d Binary files /dev/null and b/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png differ diff --git a/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png b/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png new file mode 100644 index 00000000000..7833f1dfbb7 Binary files /dev/null and b/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png differ diff --git a/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png b/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png new file mode 100644 index 00000000000..cb3f9f8618f Binary files /dev/null and b/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png differ diff --git a/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png b/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png new file mode 100644 index 00000000000..13ba5049192 Binary files /dev/null and b/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png differ diff --git a/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png b/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png index 627071591c8..573d63416db 100644 Binary files a/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png and b/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png differ diff --git a/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png b/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png new file mode 100644 index 00000000000..91b9e0f2653 Binary files /dev/null and b/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png differ diff --git a/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png b/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png new file mode 100644 index 00000000000..d545d36f00e Binary files /dev/null and b/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png differ diff --git a/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png b/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png index 22ef895d1ab..ce50be25a20 100644 Binary files a/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png and b/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png index 67e047eb505..f45207cd2f5 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png index 65258303c96..36fd59b83c1 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ diff --git a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png index c326c3f8e42..8fa5942b96f 100644 Binary files a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png b/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png new file mode 100644 index 00000000000..b59eac5950b Binary files /dev/null and b/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png differ diff --git a/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png b/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png new file mode 100644 index 00000000000..727b2bdc399 Binary files /dev/null and b/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png differ diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png index dca96a1f4f7..bd0c3d73f7f 100644 Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png new file mode 100644 index 00000000000..b3c597a3a99 Binary files /dev/null and b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png differ diff --git a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png new file mode 100644 index 00000000000..426192254a2 Binary files /dev/null and b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png differ diff --git a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png new file mode 100644 index 00000000000..edf69fad23f Binary files /dev/null and b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png differ diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png new file mode 100644 index 00000000000..2408c046bde Binary files /dev/null and b/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png differ diff --git a/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png b/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png new file mode 100644 index 00000000000..747ffb15fff Binary files /dev/null and b/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png differ diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index e0abf08e83b..51c28297fbc 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -77,10 +77,6 @@ Please see LICENSE files in the repository root for full details. } } -.mx_SettingsTab_toggleWithDescription { - margin-top: $spacing-24; -} - .mx_SettingsTab_sections { display: grid; grid-template-columns: 1fr; diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss index dd899389ef0..adc55b58f61 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss @@ -8,6 +8,6 @@ Please see LICENSE files in the repository root for full details. .mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField { width: 256px; - /* matches checkbox box + padding to align with checkbox label */ - margin-inline-start: calc($font-16px + 10px); + /* Line up with Settings field toggle button */ + margin-inline-start: 0; } diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx index 3ff42cde227..22af77c2655 100644 --- a/src/components/views/dialogs/CreateRoomDialog.tsx +++ b/src/components/views/dialogs/CreateRoomDialog.tsx @@ -7,8 +7,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type JSX, type ChangeEvent, createRef, type KeyboardEvent, type SyntheticEvent } from "react"; +import React, { + type JSX, + type ChangeEvent, + createRef, + type KeyboardEvent, + type SyntheticEvent, + type ChangeEventHandler, +} from "react"; import { type Room, RoomType, JoinRule, Preset, Visibility } from "matrix-js-sdk/src/matrix"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import SdkConfig from "../../../SdkConfig"; import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation"; @@ -17,7 +25,6 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { checkUserIsAllowedToChangeEncryption, type IOpts } from "../../../createRoom"; import Field from "../elements/Field"; import RoomAliasField from "../elements/RoomAliasField"; -import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; import DialogButtons from "../elements/DialogButtons"; import BaseDialog from "../dialogs/BaseDialog"; import JoinRuleDropdown from "../elements/JoinRuleDropdown"; @@ -25,7 +32,6 @@ import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; import { privateShouldBeEncrypted } from "../../../utils/rooms"; import SettingsStore from "../../../settings/SettingsStore"; -import LabelledCheckbox from "../elements/LabelledCheckbox"; interface IProps { type?: RoomType; @@ -219,8 +225,8 @@ export default class CreateRoomDialog extends React.Component { this.setState({ joinRule }); }; - private onEncryptedChange = (isEncrypted: boolean): void => { - this.setState({ isEncrypted }); + private onEncryptedChange: ChangeEventHandler = (evt): void => { + this.setState({ isEncrypted: evt.target.checked }); }; private onAliasChange = (alias: string): void => { @@ -231,8 +237,8 @@ export default class CreateRoomDialog extends React.Component { this.setState({ detailsOpen: (ev.target as HTMLDetailsElement).open }); }; - private onNoFederateChange = (noFederate: boolean): void => { - this.setState({ noFederate }); + private onNoFederateChange: ChangeEventHandler = (evt): void => { + this.setState({ noFederate: evt.target.checked }); }; private onNameValidate = async (fieldState: IFieldState): Promise => { @@ -241,8 +247,8 @@ export default class CreateRoomDialog extends React.Component { return result; }; - private onIsPublicKnockRoomChange = (isPublicKnockRoom: boolean): void => { - this.setState({ isPublicKnockRoom }); + private onIsPublicKnockRoomChange: ChangeEventHandler = (evt): void => { + this.setState({ isPublicKnockRoom: evt.target.checked }); }; private static validateRoomName = withValidation({ @@ -329,11 +335,12 @@ export default class CreateRoomDialog extends React.Component { let visibilitySection: JSX.Element | undefined; if (this.state.joinRule === JoinRule.Knock) { visibilitySection = ( - ); } @@ -354,11 +361,11 @@ export default class CreateRoomDialog extends React.Component { } e2eeSection = ( -

{microcopy}

@@ -392,7 +399,7 @@ export default class CreateRoomDialog extends React.Component { title={title} screenName="CreateRoom" > -
+
{ {this.state.detailsOpen ? _t("action|hide_advanced") : _t("action|show_advanced")} - -

{federateLabel}

- +
void; @@ -22,6 +21,14 @@ export const DeclineAndBlockInviteDialog: React.FunctionComponent = ({ o const [shouldReport, setShouldReport] = useState(false); const [ignoreUser, setIgnoreUser] = useState(false); + const onShouldReportChanged = useCallback>( + (e) => setShouldReport(e.target.checked), + [setShouldReport], + ); + const onIgnoreUserChanged = useCallback>( + (e) => setIgnoreUser(e.target.checked), + [setIgnoreUser], + ); const [reportReason, setReportReason] = useState(""); const reportReasonChanged = useCallback>( (e) => setReportReason(e.target.value), @@ -43,17 +50,19 @@ export const DeclineAndBlockInviteDialog: React.FunctionComponent = ({ o >

{_t("decline_invitation_dialog|confirm", { roomName })}

- - {adminMessage} {busy ? : null} - { - this.setState({ inviteUsersToNewRoom }); + private onInviteUsersToggle: ChangeEventHandler = (evt): void => { + this.setState({ inviteUsersToNewRoom: evt.target.checked }); }; private openBugReportDialog = (e: SyntheticEvent): void => { @@ -104,11 +104,19 @@ export default class RoomUpgradeWarningDialog extends React.Component + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + + ); } diff --git a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx b/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx index 2837701673e..ac070a42019 100644 --- a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx +++ b/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React from "react"; +import React, { type ChangeEventHandler } from "react"; import { type Capability, isTimelineCapability, @@ -15,13 +15,13 @@ import { type WidgetKind, } from "matrix-widget-api"; import { lexicographicCompare } from "matrix-js-sdk/src/utils"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import BaseDialog from "./BaseDialog"; import { _t } from "../../../languageHandler"; import { objectShallowClone } from "../../../utils/objects"; import StyledCheckbox from "../elements/StyledCheckbox"; import DialogButtons from "../elements/DialogButtons"; -import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; import { CapabilityText } from "../../../widgets/CapabilityText"; interface IProps { @@ -64,8 +64,8 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent< this.setState({ booleanStates: newStates }); }; - private onRememberSelectionChange = (newVal: boolean): void => { - this.setState({ rememberSelection: newVal }); + private onRememberSelectionChange: ChangeEventHandler = (evt): void => { + this.setState({ rememberSelection: evt.target.checked }); }; private onSubmit = async (): Promise => { @@ -116,7 +116,7 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent< onFinished={this.props.onFinished} title={_t("widget|capabilities_dialog|title")} > -
+
{_t("widget|capabilities_dialog|content_starting_text")}
{checkboxRows} @@ -126,16 +126,16 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent< onPrimaryButtonClick={this.onSubmit} onCancel={this.onReject} additive={ - } />
- +
); } diff --git a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx index f9729a695e3..d0d06d12d59 100644 --- a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx +++ b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx @@ -7,12 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React from "react"; +import React, { type ChangeEventHandler } from "react"; import { type Widget, type WidgetKind } from "matrix-widget-api"; import { logger } from "matrix-js-sdk/src/logger"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import { _t } from "../../../languageHandler"; -import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; import { OIDCState } from "../../../stores/widgets/WidgetPermissionStore"; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; @@ -61,8 +61,8 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent { - this.setState({ rememberSelection: newVal }); + private onRememberSelectionChange: ChangeEventHandler = (evt): void => { + this.setState({ rememberSelection: evt.target.checked }); }; public render(): React.ReactNode { @@ -85,12 +85,19 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + + } /> diff --git a/src/components/views/elements/LabelledCheckbox.tsx b/src/components/views/elements/LabelledCheckbox.tsx index ba07ed92014..45cef43da96 100644 --- a/src/components/views/elements/LabelledCheckbox.tsx +++ b/src/components/views/elements/LabelledCheckbox.tsx @@ -24,11 +24,13 @@ interface IProps { onChange(checked: boolean): void; // Optional additional CSS class to apply to the label className?: string; + // The id for the checkbox + id?: string; } -const LabelledCheckbox: React.FC = ({ value, label, byline, disabled, onChange, className }) => { +const LabelledCheckbox: React.FC = ({ value, label, byline, disabled, onChange, className, id }) => { return ( -
+
= ({ - label, - caption, - value, - disabled, - onChange, - tooltip, - toggleInFront, - className, - "data-testid": testId, -}) => { - // This is a minimal version of a SettingsFlag - const generatedId = useId(); - const id = `mx_LabelledToggleSwitch_${generatedId}`; - let firstPart = ( - -
{label}
- {caption && {caption}} - - ); - let secondPart = ( - - ); - - if (toggleInFront) { - [firstPart, secondPart] = [secondPart, firstPart]; - } - - const classes = classNames("mx_SettingsFlag", className, { - mx_SettingsFlag_toggleInFront: toggleInFront, - }); - return ( -
- {firstPart} - {secondPart} -
- ); -}; - -export default LabelledToggleSwitch; diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx index d7fac918757..eb05301270e 100644 --- a/src/components/views/elements/SettingsFlag.tsx +++ b/src/components/views/elements/SettingsFlag.tsx @@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React from "react"; +import React, { type ChangeEvent } from "react"; import { secureRandomString } from "matrix-js-sdk/src/randomstring"; +import { SettingsToggleInput } from "@vector-im/compound-web"; +import { logger } from "matrix-js-sdk/src/logger"; import SettingsStore from "../../../settings/SettingsStore"; import { _t } from "../../../languageHandler"; -import ToggleSwitch from "./ToggleSwitch"; -import StyledCheckbox from "./StyledCheckbox"; import { type SettingLevel } from "../../../settings/SettingLevel"; import { type BooleanSettingKey, defaultWatchManager } from "../../../settings/Settings"; @@ -24,8 +24,6 @@ interface IProps { roomId?: string; // for per-room settings label?: string; isExplicit?: boolean; - // XXX: once design replaces all toggles make this the default - useCheckbox?: boolean; hideIfCannotSet?: boolean; onChange?(checked: boolean): void; } @@ -74,14 +72,16 @@ export default class SettingsFlag extends React.Component { }); }; - private onChange = async (checked: boolean): Promise => { - await this.save(checked); - this.setState({ value: checked }); - this.props.onChange?.(checked); - }; - - private checkBoxOnChange = (e: React.ChangeEvent): void => { - this.onChange(e.target.checked); + private onChange = async (evt: ChangeEvent): Promise => { + const newValue = evt.target.checked; + try { + await this.save(newValue); + } catch (ex) { + logger.info(`Failed to save setting ${this.props.name}`, ex); + return; + } + this.setState({ value: newValue }); + this.props.onChange?.(newValue); }; private save = async (val?: boolean): Promise => { @@ -101,45 +101,28 @@ export default class SettingsFlag extends React.Component { const label = this.props.label ?? SettingsStore.getDisplayName(this.props.name, this.props.level); const description = SettingsStore.getDescription(this.props.name); const shouldWarn = SettingsStore.shouldHaveWarning(this.props.name); - - if (this.props.useCheckbox) { - return ( - - {label} - - ); - } else { - return ( -
- - -
- ); - } + const helpMessage = shouldWarn + ? _t( + "settings|warning", + {}, + { + w: (sub) => {sub}, + description, + }, + ) + : description; + const disabledMessage = SettingsStore.disabledMessage(this.props.name); + return ( + + ); } } diff --git a/src/components/views/location/EnableLiveShare.tsx b/src/components/views/location/EnableLiveShare.tsx index 18fc6025d30..baa42ae6f95 100644 --- a/src/components/views/location/EnableLiveShare.tsx +++ b/src/components/views/location/EnableLiveShare.tsx @@ -6,12 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { useState } from "react"; +import React, { type ChangeEventHandler, type FormEventHandler, useCallback, useState } from "react"; +import { SettingsToggleInput, Form, Button } from "@vector-im/compound-web"; import { _t } from "../../../languageHandler"; import StyledLiveBeaconIcon from "../beacon/StyledLiveBeaconIcon"; -import AccessibleButton from "../elements/AccessibleButton"; -import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; import Heading from "../typography/Heading"; interface Props { @@ -20,6 +19,23 @@ interface Props { export const EnableLiveShare: React.FC = ({ onSubmit }) => { const [isEnabled, setEnabled] = useState(false); + + const onEnabledChanged = useCallback>( + (e) => setEnabled(e.target.checked), + [setEnabled], + ); + + const onSubmitForm = useCallback( + (evt) => { + evt.preventDefault(); + evt.stopPropagation(); + if (isEnabled) { + onSubmit(); + } + }, + [isEnabled, onSubmit], + ); + return (
@@ -27,22 +43,17 @@ export const EnableLiveShare: React.FC = ({ onSubmit }) => { {_t("location_sharing|live_enable_heading")}

{_t("location_sharing|live_enable_description")}

- - - {_t("action|ok")} - + + + +
); }; diff --git a/src/components/views/room_settings/RoomPublishSetting.tsx b/src/components/views/room_settings/RoomPublishSetting.tsx index 5147945c364..cac8a55e24d 100644 --- a/src/components/views/room_settings/RoomPublishSetting.tsx +++ b/src/components/views/room_settings/RoomPublishSetting.tsx @@ -6,10 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React from "react"; +import React, { type ChangeEventHandler } from "react"; import { JoinRule, Visibility } from "matrix-js-sdk/src/matrix"; +import { SettingsToggleInput } from "@vector-im/compound-web"; +import { logger } from "matrix-js-sdk/src/logger"; -import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; import { _t } from "../../../languageHandler"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import DirectoryCustomisations from "../../../customisations/Directory"; @@ -24,6 +25,7 @@ interface IProps { interface IState { isRoomPublished: boolean; + busy: boolean; } export default class RoomPublishSetting extends React.PureComponent { @@ -32,6 +34,7 @@ export default class RoomPublishSetting extends React.PureComponent { - const valueBefore = this.state.isRoomPublished; - const newValue = !valueBefore; - this.setState({ isRoomPublished: newValue }); + private onRoomPublishChange: ChangeEventHandler = async (evt): Promise => { + const newValue = evt.target.checked; + this.setState({ busy: true }); const client = MatrixClientPeg.safeGet(); - client - .setRoomDirectoryVisibility(this.props.roomId, newValue ? Visibility.Public : Visibility.Private) - .catch(() => { - this.showError(); - // Roll back the local echo on the change - this.setState({ isRoomPublished: valueBefore }); - }); + try { + await client.setRoomDirectoryVisibility( + this.props.roomId, + newValue ? Visibility.Public : Visibility.Private, + ); + this.setState({ isRoomPublished: newValue }); + } catch (ex) { + logger.error("Error while setting room directory visibility", ex); + this.showError(); + } finally { + this.setState({ busy: false }); + } }; public componentDidMount(): void { @@ -69,17 +76,26 @@ export default class RoomPublishSetting extends React.PureComponent { return ( -
+ { + evt.preventDefault(); + evt.stopPropagation(); + }} + > -
+ ); }; @@ -213,9 +215,6 @@ export default class Notifications extends React.PureComponent - this.setState({ desktopNotifications: value as boolean }), - ), SettingsStore.watchSetting("deviceNotificationsEnabled", null, (...[, , , , value]) => { this.setState({ deviceNotificationsEnabled: value as boolean }); }), - SettingsStore.watchSetting("notificationBodyEnabled", null, (...[, , , , value]) => - this.setState({ desktopShowBody: value as boolean }), - ), - SettingsStore.watchSetting("audioNotificationsEnabled", null, (...[, , , , value]) => - this.setState({ audioNotifications: value as boolean }), - ), ]; // noinspection JSIgnoredPromiseFromCall @@ -286,7 +276,7 @@ export default class Notifications extends React.PureComponent => { + private onMasterRuleChanged: ChangeEventHandler = async (evt): Promise => { + const { checked } = evt.target; this.setState({ phase: Phase.Persisting }); const masterRule = this.state.masterPushRule!; @@ -431,11 +422,8 @@ export default class Notifications extends React.PureComponent => { - await SettingsStore.setValue("deviceNotificationsEnabled", null, SettingLevel.DEVICE, checked); - }; - - private onEmailNotificationsChanged = async (email: string, checked: boolean): Promise => { + private onEmailNotificationsChanged = async (email: string, evt: ChangeEvent): Promise => { + const { checked } = evt.target; this.setState({ phase: Phase.Persisting }); try { @@ -470,18 +458,6 @@ export default class Notifications extends React.PureComponent => { - await SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, checked); - }; - - private onDesktopShowBodyChanged = async (checked: boolean): Promise => { - await SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, checked); - }; - - private onAudioNotificationsChanged = async (checked: boolean): Promise => { - await SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, checked); - }; - private onRadioChecked = async (rule: IVectorPushRule, checkedState: VectorState): Promise => { this.setState(({ ruleIdsWithError }) => ({ phase: Phase.Persisting, @@ -663,11 +639,11 @@ export default class Notifications extends React.PureComponent @@ -681,10 +657,10 @@ export default class Notifications extends React.PureComponent t.medium === ThreepidMedium.Email) .map((e) => ( - p.kind === "email" && p.pushkey === e.address)} + checked={!!this.state.pushers?.some((p) => p.kind === "email" && p.pushkey === e.address)} label={_t("settings|notifications|enable_email_notifications", { email: e.address })} onChange={this.onEmailNotificationsChanged.bind(this, e.address)} disabled={this.state.phase === Phase.Persisting} @@ -695,37 +671,13 @@ export default class Notifications extends React.PureComponent {masterSwitch} - this.updateDeviceNotifications(checked)} - disabled={this.state.phase === Phase.Persisting} - /> + {this.state.deviceNotificationsEnabled && ( <> - - - + + + )} @@ -868,7 +820,12 @@ export default class Notifications extends React.PureComponent + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > {this.renderTopSection()} {this.renderCategory(RuleClass.VectorGlobal)} {this.renderCategory(RuleClass.VectorMentions)} @@ -876,7 +833,7 @@ export default class Notifications extends React.PureComponent {clearNotifsButton} - + ); } } diff --git a/src/components/views/settings/SetIntegrationManager.tsx b/src/components/views/settings/SetIntegrationManager.tsx index 98066bc0a42..44507067add 100644 --- a/src/components/views/settings/SetIntegrationManager.tsx +++ b/src/components/views/settings/SetIntegrationManager.tsx @@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { type EmptyObject } from "matrix-js-sdk/src/matrix"; -import { Root, InlineField, Label, ToggleInput } from "@vector-im/compound-web"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import { _t } from "../../../languageHandler"; import { IntegrationManagers } from "../../../integrations/IntegrationManagers"; @@ -66,33 +66,31 @@ export default class SetIntegrationManager extends React.Component + { + evt.preventDefault(); + evt.stopPropagation(); + }} + className="mx_SetIntegrationManager" + data-testid="mx_SetIntegrationManager" + >
{_t("integration_manager|manage_title")} - {managerName} + + {managerName} +
- {bodyText} + {bodyText} {_t("integration_manager|explainer")} - - - } - > - - - -
+ + ); } } diff --git a/src/components/views/settings/notifications/NotificationSettings2.tsx b/src/components/views/settings/notifications/NotificationSettings2.tsx index 405d7892574..768d25eb39e 100644 --- a/src/components/views/settings/notifications/NotificationSettings2.tsx +++ b/src/components/views/settings/notifications/NotificationSettings2.tsx @@ -7,11 +7,11 @@ Please see LICENSE files in the repository root for full details. */ import React, { type JSX, useState } from "react"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import NewAndImprovedIcon from "../../../../../res/img/element-icons/new-and-improved.svg"; import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext"; import { useNotificationSettings } from "../../../../hooks/useNotificationSettings"; -import { useSettingValue } from "../../../../hooks/useSettings"; import { _t } from "../../../../languageHandler"; import { DefaultNotificationSettings, @@ -19,13 +19,11 @@ import { } from "../../../../models/notificationsettings/NotificationSettings"; import { RoomNotifState } from "../../../../RoomNotifs"; import { SettingLevel } from "../../../../settings/SettingLevel"; -import SettingsStore from "../../../../settings/SettingsStore"; import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel"; import { clearAllNotifications } from "../../../../utils/notifications"; import AccessibleButton from "../../elements/AccessibleButton"; import ExternalLink from "../../elements/ExternalLink"; import LabelledCheckbox from "../../elements/LabelledCheckbox"; -import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch"; import StyledRadioGroup from "../../elements/StyledRadioGroup"; import TagComposer from "../../elements/TagComposer"; import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge"; @@ -70,10 +68,6 @@ function useHasUnreadNotifications(): boolean { export default function NotificationSettings2(): JSX.Element { const cli = useMatrixClientContext(); - const desktopNotifications = useSettingValue("notificationsEnabled"); - const desktopShowBody = useSettingValue("notificationBodyEnabled"); - const audioNotifications = useSettingValue("audioNotificationsEnabled"); - const { model, hasPendingChanges, reconcile } = useNotificationSettings(cli); const disabled = model === null || hasPendingChanges; @@ -116,267 +110,262 @@ export default function NotificationSettings2(): JSX.Element { )} -
- { - reconcile({ - ...model!, - globalMute: !value, - }); - }} - /> - - SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, value) - } - /> - - SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, value) - } - /> - - SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, value) - } - /> -
- - { - reconcile({ - ...model!, - defaultLevels: { - ...model!.defaultLevels, - dm: - value !== NotificationDefaultLevels.MentionsKeywords - ? RoomNotifState.AllMessages - : RoomNotifState.MentionsOnly, - room: - value === NotificationDefaultLevels.AllMessages - ? RoomNotifState.AllMessages - : RoomNotifState.MentionsOnly, - }, - }); - }} - /> - - - { - reconcile({ - ...model!, - sound: { - ...model!.sound, - people: value ? "default" : undefined, - }, - }); - }} - /> - { - reconcile({ - ...model!, - sound: { - ...model!.sound, - mentions: value ? "default" : undefined, - }, - }); - }} - /> - { - reconcile({ - ...model!, - sound: { - ...model!.sound, - calls: value ? "ring" : undefined, - }, - }); - }} - /> - - - { - reconcile({ - ...model!, - activity: { - ...model!.activity, - invite: value, - }, - }); - }} - /> - { - reconcile({ - ...model!, - activity: { - ...model!.activity, - status_event: value, - }, - }); - }} - /> - { - reconcile({ - ...model!, - activity: { - ...model!.activity, - bot_notices: value, - }, - }); - }} - /> - - - ), - }, - )} + { + evt.preventDefault(); + evt.stopPropagation(); + }} > - { - reconcile({ - ...model!, - mentions: { - ...model!.mentions, - room: value, - }, - }); - }} - /> - { - reconcile({ - ...model!, - mentions: { - ...model!.mentions, - user: value, - }, - }); - }} - /> - { - reconcile({ - ...model!, - mentions: { - ...model!.mentions, - keywords: value, - }, - }); - }} - /> - { - reconcile({ - ...model!, - keywords: [keyword, ...model!.keywords], - }); - }} - onRemove={(keyword) => { - reconcile({ - ...model!, - keywords: model!.keywords.filter((it) => it !== keyword), - }); - }} - label={_t("notifications|keyword")} - placeholder={_t("notifications|keyword_new")} - /> +
+ { + reconcile({ + ...model!, + globalMute: !evt.target.checked, + }); + }} + /> + + + +
+ + { + reconcile({ + ...model!, + defaultLevels: { + ...model!.defaultLevels, + dm: + value !== NotificationDefaultLevels.MentionsKeywords + ? RoomNotifState.AllMessages + : RoomNotifState.MentionsOnly, + room: + value === NotificationDefaultLevels.AllMessages + ? RoomNotifState.AllMessages + : RoomNotifState.MentionsOnly, + }, + }); + }} + /> + + + { + reconcile({ + ...model!, + sound: { + ...model!.sound, + people: value ? "default" : undefined, + }, + }); + }} + /> + { + reconcile({ + ...model!, + sound: { + ...model!.sound, + mentions: value ? "default" : undefined, + }, + }); + }} + /> + { + reconcile({ + ...model!, + sound: { + ...model!.sound, + calls: value ? "ring" : undefined, + }, + }); + }} + /> + + + { + reconcile({ + ...model!, + activity: { + ...model!.activity, + invite: value, + }, + }); + }} + /> + { + reconcile({ + ...model!, + activity: { + ...model!.activity, + status_event: value, + }, + }); + }} + /> + { + reconcile({ + ...model!, + activity: { + ...model!.activity, + bot_notices: value, + }, + }); + }} + /> + + + ), + }, + )} + > + { + reconcile({ + ...model!, + mentions: { + ...model!.mentions, + room: value, + }, + }); + }} + /> + { + reconcile({ + ...model!, + mentions: { + ...model!.mentions, + user: value, + }, + }); + }} + /> + { + reconcile({ + ...model!, + mentions: { + ...model!.mentions, + keywords: value, + }, + }); + }} + /> + { + reconcile({ + ...model!, + keywords: [keyword, ...model!.keywords], + }); + }} + onRemove={(keyword) => { + reconcile({ + ...model!, + keywords: model!.keywords.filter((it) => it !== keyword), + }); + }} + label={_t("notifications|keyword")} + placeholder={_t("notifications|keyword_new")} + /> - - - - - - {hasUnreadNotifications && ( + + + + + + {hasUnreadNotifications && ( + { + setUpdatingUnread(true); + await clearAllNotifications(cli); + setUpdatingUnread(false); + }} + > + {_t("settings|notifications|quick_actions_mark_all_read")} + + )} { - setUpdatingUnread(true); - await clearAllNotifications(cli); - setUpdatingUnread(false); + kind="danger_outline" + disabled={model === null} + onClick={() => { + reconcile(DefaultNotificationSettings); }} > - {_t("settings|notifications|quick_actions_mark_all_read")} + {_t("settings|notifications|quick_actions_reset")} - )} - { - reconcile(DefaultNotificationSettings); - }} - > - {_t("settings|notifications|quick_actions_reset")} - - + +
); diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/src/components/views/settings/shared/SettingsSubsection.tsx index 6f7fdde1f0c..ac4872f5983 100644 --- a/src/components/views/settings/shared/SettingsSubsection.tsx +++ b/src/components/views/settings/shared/SettingsSubsection.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import classNames from "classnames"; import React, { type HTMLAttributes } from "react"; -import { Separator } from "@vector-im/compound-web"; +import { Form, Separator } from "@vector-im/compound-web"; import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading"; @@ -23,6 +23,11 @@ export interface SettingsSubsectionProps extends HTMLAttributes * @default true */ legacy?: boolean; + + /** + * Wrap in a Form Root component, for compatibility with compound components. + */ + formWrap?: boolean; } export const SettingsSubsectionText: React.FC> = ({ children, ...rest }) => ( @@ -37,31 +42,48 @@ export const SettingsSubsection: React.FC = ({ children, stretchContent, legacy = true, + formWrap, ...rest -}) => ( -
- {typeof heading === "string" ? : <>{heading}} - {!!description && ( -
- {description} -
- )} - {!!children && ( -
{ + const content = ( +
+ {typeof heading === "string" ? : <>{heading}} + {!!description && ( +
+ {description} +
+ )} + {!!children && ( +
+ {children} +
+ )} + {!legacy && } +
+ ); + + if (formWrap) { + return ( + { + evt.preventDefault(); + evt.stopPropagation(); + }} > - {children} -
- )} - {!legacy && } -
-); + {content} + + ); + } + return content; +}; diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx index b50eb22a7c5..4b04e4bcf35 100644 --- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { type ContextType } from "react"; import { type Room } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; +import { Form } from "@vector-im/compound-web"; import { _t } from "../../../../../languageHandler"; import RoomProfileSettings from "../../../room_settings/RoomProfileSettings"; @@ -78,26 +79,33 @@ export default class GeneralRoomSettingsTab extends React.Component - - - - - - - - - - {urlPreviewSettings} - - - - {leaveSection} - + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + + + + + + + + + + {urlPreviewSettings} + + + + {leaveSection} + + ); } diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 89ae96f8a46..43bd88aa333 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type JSX, type ReactNode } from "react"; +import React, { type ChangeEventHandler, type JSX, type ReactNode } from "react"; import { GuestAccess, HistoryVisibility, @@ -17,11 +17,10 @@ import { EventType, } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; -import { InlineSpinner } from "@vector-im/compound-web"; +import { Form, InlineSpinner, SettingsToggleInput } from "@vector-im/compound-web"; import { Icon as WarningIcon } from "../../../../../../res/img/warning.svg"; import { _t } from "../../../../../languageHandler"; -import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import Modal from "../../../../../Modal"; import QuestionDialog from "../../../dialogs/QuestionDialog"; import StyledRadioGroup from "../../../elements/StyledRadioGroup"; @@ -184,7 +183,8 @@ export default class SecurityRoomSettingsTab extends React.Component { + private onGuestAccessChange: ChangeEventHandler = (evt): void => { + const allowed = evt.target.checked; const guestAccess = allowed ? GuestAccess.CanJoin : GuestAccess.Forbidden; const beforeGuestAccess = this.state.guestAccess; if (beforeGuestAccess === guestAccess) return; @@ -405,13 +405,14 @@ export default class SecurityRoomSettingsTab extends React.Component - -

{_t("room_settings|security|guest_access_warning")}

); } @@ -445,33 +446,41 @@ export default class SecurityRoomSettingsTab extends React.Component - { + evt.preventDefault(); + evt.stopPropagation(); + }} > - {isEncryptionLoading ? ( - - ) : ( - <> - - {isEncryptionForceDisabled && !isEncrypted && ( - {_t("room_settings|security|encryption_forced")} - )} - {encryptionSettings} - - )} - - {this.renderJoinRule()} - {historySection} + + {isEncryptionLoading ? ( + + ) : ( + <> + + {isEncryptionForceDisabled && !isEncrypted && ( + {_t("room_settings|security|encryption_forced")} + )} + {encryptionSettings} + + )} + + {this.renderJoinRule()} + {historySection} + ); diff --git a/src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx index 3583179b924..06a5d89b74b 100644 --- a/src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx @@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { useCallback, useMemo, useState } from "react"; +import React, { type ChangeEventHandler, useCallback, useMemo, useState } from "react"; import { JoinRule, EventType, type RoomState, type Room } from "matrix-js-sdk/src/matrix"; import { type RoomPowerLevelsEventContent } from "matrix-js-sdk/src/types"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import { _t } from "../../../../../languageHandler"; -import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import { SettingsSubsection } from "../../shared/SettingsSubsection"; import SettingsTab from "../SettingsTab"; import { ElementCall } from "../../../../../models/Call"; @@ -45,8 +45,9 @@ const ElementCallSwitch: React.FC = ({ room }) => { return content.events?.[ElementCall.MEMBER_EVENT_TYPE.name] === 0; }); - const onChange = useCallback( - (enabled: boolean): void => { + const onChange = useCallback>( + (evt): void => { + const enabled = evt.target.checked; setElementCallEnabled(enabled); // Take a copy to avoid mutating the original @@ -73,16 +74,17 @@ const ElementCallSwitch: React.FC = ({ room }) => { const brand = SdkConfig.get("element_call").brand ?? DEFAULTS.element_call.brand; return ( - ); }; @@ -95,9 +97,16 @@ export const VoipRoomSettingsTab: React.FC = ({ room }) => { return ( - - - + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + + + + ); diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 7d46cf72da5..9f9efb60ae2 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details. import React, { type ChangeEvent, type ReactNode } from "react"; import { type EmptyObject } from "matrix-js-sdk/src/matrix"; +import { Form } from "@vector-im/compound-web"; import { _t } from "../../../../../languageHandler"; -import SdkConfig from "../../../../../SdkConfig"; import SettingsStore from "../../../../../settings/SettingsStore"; import SettingsFlag from "../../../elements/SettingsFlag"; import Field from "../../../elements/Field"; @@ -48,7 +48,6 @@ export default class AppearanceUserSettingsTab extends React.Component - + this.setState({ useBundledEmojiFont: checked })} /> this.setState({ useSystemFont: checked })} /> @@ -110,10 +104,17 @@ export default class AppearanceUserSettingsTab extends React.Component - - - {this.renderAdvancedSection()} - + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + + + {this.renderAdvancedSection()} + + ); diff --git a/src/components/views/settings/tabs/user/InviteRulesAccountSettings.tsx b/src/components/views/settings/tabs/user/InviteRulesAccountSettings.tsx index 5ceeffa4ef1..a16cceb7c1b 100644 --- a/src/components/views/settings/tabs/user/InviteRulesAccountSettings.tsx +++ b/src/components/views/settings/tabs/user/InviteRulesAccountSettings.tsx @@ -5,26 +5,25 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type FC, useCallback, useState } from "react"; -import { Root } from "@vector-im/compound-web"; +import React, { type ChangeEventHandler, type FC, useCallback, useState } from "react"; +import { Root, SettingsToggleInput } from "@vector-im/compound-web"; import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../../../languageHandler"; import { useSettingValue } from "../../../../../hooks/useSettings"; import SettingsStore from "../../../../../settings/SettingsStore"; import { SettingLevel } from "../../../../../settings/SettingLevel"; -import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; export const InviteRulesAccountSetting: FC = () => { const rules = useSettingValue("inviteRules"); const settingsDisabled = SettingsStore.disabledMessage("inviteRules"); const [busy, setBusy] = useState(false); - const onChange = useCallback(async (checked: boolean) => { + const onChange = useCallback>(async (evt) => { try { setBusy(true); await SettingsStore.setValue("inviteRules", null, SettingLevel.ACCOUNT, { - allBlocked: !checked, + allBlocked: !evt.target.checked, }); } catch (ex) { logger.error(`Unable to set invite rules`, ex); @@ -33,13 +32,20 @@ export const InviteRulesAccountSetting: FC = () => { } }, []); return ( - - { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx index 622343b287d..85d41cbf0dc 100644 --- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { type JSX } from "react"; import { sortBy } from "lodash"; import { type EmptyObject } from "matrix-js-sdk/src/matrix"; +import { Form } from "@vector-im/compound-web"; import { _t } from "../../../../../languageHandler"; import SettingsStore from "../../../../../settings/SettingsStore"; @@ -106,37 +107,44 @@ export default class LabsUserSettingsTab extends React.Component { return ( - - - {_t("labs|beta_description", { brand: SdkConfig.get("brand") })} - - {betaSection} - - - {labsSections && ( - + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + - {_t( - "labs|experimental_description", - {}, - { - a: (sub) => { - return ( - - {sub} - - ); - }, - }, - )} + {_t("labs|beta_description", { brand: SdkConfig.get("brand") })} - {labsSections} + {betaSection} - )} + + {labsSections && ( + + + {_t( + "labs|experimental_description", + {}, + { + a: (sub) => { + return ( + + {sub} + + ); + }, + }, + )} + + {labsSections} + + )} + ); } diff --git a/src/components/views/settings/tabs/user/MediaPreviewAccountSettings.tsx b/src/components/views/settings/tabs/user/MediaPreviewAccountSettings.tsx index f6a2b7cf384..1194f2fd020 100644 --- a/src/components/views/settings/tabs/user/MediaPreviewAccountSettings.tsx +++ b/src/components/views/settings/tabs/user/MediaPreviewAccountSettings.tsx @@ -6,9 +6,8 @@ Please see LICENSE files in the repository root for full details. */ import React, { type ChangeEventHandler, useCallback } from "react"; -import { Field, HelpMessage, InlineField, Label, RadioInput, Root } from "@vector-im/compound-web"; +import { Field, HelpMessage, InlineField, Label, RadioInput, Root, SettingsToggleInput } from "@vector-im/compound-web"; -import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import { type MediaPreviewConfig, MediaPreviewValue } from "../../../../../@types/media_preview"; import { _t } from "../../../../../languageHandler"; import { useSettingValue } from "../../../../../hooks/useSettings"; @@ -30,12 +29,12 @@ export const MediaPreviewAccountSettings: React.FC<{ roomId?: string }> = ({ roo [roomId], ); - const avatarOnChange = useCallback( - (c: boolean) => { + const avatarOnChange = useCallback>( + (evt) => { changeSetting({ ...currentMediaPreview, // Switch is inverted. "Hide avatars..." - invite_avatars: c ? MediaPreviewValue.Off : MediaPreviewValue.On, + invite_avatars: evt.target.checked ? MediaPreviewValue.Off : MediaPreviewValue.On, }); }, [changeSetting, currentMediaPreview], @@ -83,10 +82,10 @@ export const MediaPreviewAccountSettings: React.FC<{ roomId?: string }> = ({ roo return ( {!roomId && ( - )} diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx index ecf2766b209..448e33464d1 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx @@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type JSX, type ReactElement, useCallback, useEffect, useState } from "react"; +import React, { type ChangeEventHandler, type JSX, type ReactElement, useCallback, useEffect, useState } from "react"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import { type NonEmptyArray } from "../../../../../@types/common"; import { _t, getCurrentLanguage } from "../../../../../languageHandler"; @@ -29,7 +30,6 @@ import LanguageDropdown from "../../../elements/LanguageDropdown"; import PlatformPeg from "../../../../../PlatformPeg"; import { IS_MAC } from "../../../../../Keyboard"; import SpellCheckSettings from "../../SpellCheckSettings"; -import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import * as TimezoneHandler from "../../../../../TimezoneHandler"; import { type BooleanSettingKey } from "../../../../../settings/Settings.tsx"; import { MediaPreviewAccountSettings } from "./MediaPreviewAccountSettings.tsx"; @@ -91,9 +91,9 @@ const SpellCheckSection: React.FC = () => { })(); }, []); - const onSpellCheckEnabledChange = useCallback((enabled: boolean) => { - setSpellCheckEnabled(enabled); - PlatformPeg.get()?.setSpellCheckEnabled(enabled); + const onSpellCheckEnabledChange = useCallback>((evt) => { + setSpellCheckEnabled(evt.target.checked); + PlatformPeg.get()?.setSpellCheckEnabled(evt.target.checked); }, []); const onSpellCheckLanguagesChange = useCallback((languages: string[]): void => { @@ -105,11 +105,14 @@ const SpellCheckSection: React.FC = () => { return ( <> - + + + {spellCheckEnabled && spellCheckLanguages !== undefined && !IS_MAC && ( )} @@ -263,8 +266,7 @@ export default class PreferencesUserSettingsTab extends React.Component - - + {this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)} {/* The settings is on device level where the other room list settings are on account level */} {newRoomListEnabled && ( @@ -272,12 +274,13 @@ export default class PreferencesUserSettingsTab extends React.Component - + {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)} - +
{_t("settings|preferences|user_timezone")} {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)} - + {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)} - + {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)} - + {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)} - + {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)} - + - + {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)} - + {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)} diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx index 1c85aada341..e17a6be227c 100644 --- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx @@ -11,6 +11,7 @@ import { sleep } from "matrix-js-sdk/src/utils"; import { type Room, RoomEvent, type IServerVersions } from "matrix-js-sdk/src/matrix"; import { KnownMembership, type Membership } from "matrix-js-sdk/src/types"; import { logger } from "matrix-js-sdk/src/logger"; +import { Form } from "@vector-im/compound-web"; import { _t } from "../../../../../languageHandler"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; @@ -357,13 +358,27 @@ export default class SecurityUserSettingsTab extends React.Component {warning} - - {secureBackup} - {eventIndex} - + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + + {secureBackup} + {eventIndex} + + - {posthogSection} + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + {posthogSection} + {advancedSection} diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx index 84b4ec778fd..b1b47788a5d 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx @@ -7,10 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type JSX, type ReactNode } from "react"; +import React, { type ChangeEventHandler, type JSX, type ReactNode } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { FALLBACK_ICE_SERVER } from "matrix-js-sdk/src/webrtc/call"; import { type EmptyObject } from "matrix-js-sdk/src/matrix"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import { _t } from "../../../../../languageHandler"; import MediaDeviceHandler, { type IMediaDevices, MediaDeviceKindEnum } from "../../../../../MediaDeviceHandler"; @@ -18,7 +19,6 @@ import Field from "../../../elements/Field"; import AccessibleButton from "../../../elements/AccessibleButton"; import { SettingLevel } from "../../../../../settings/SettingLevel"; import SettingsFlag from "../../../elements/SettingsFlag"; -import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import { requestMediaPermissions } from "../../../../../utils/media/requestMediaPermissions"; import SettingsTab from "../SettingsTab"; import { SettingsSection } from "../../shared/SettingsSection"; @@ -140,6 +140,24 @@ export default class VoiceUserSettingsTab extends React.Component = async (event) => { + const enable = event.target.checked; + await MediaDeviceHandler.setAudioAutoGainControl(enable); + this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() }); + }; + + private onNoiseSuppressionChanged: ChangeEventHandler = async (event) => { + const enable = event.target.checked; + await MediaDeviceHandler.setAudioNoiseSuppression(enable); + this.setState({ audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression() }); + }; + + private onEchoCancellationChanged: ChangeEventHandler = async (event) => { + const enable = event.target.checked; + await MediaDeviceHandler.setAudioEchoCancellation(enable); + this.setState({ audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation() }); + }; + public render(): ReactNode { let requestButton: ReactNode | undefined; let speakerDropdown: ReactNode | undefined; @@ -169,64 +187,62 @@ export default class VoiceUserSettingsTab extends React.Component - - {requestButton} - - {speakerDropdown} - {microphoneDropdown} - => { - await MediaDeviceHandler.setAudioAutoGainControl(v); - this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() }); - }} - label={_t("settings|voip|voice_agc")} - data-testid="voice-auto-gain" - /> - - - {webcamDropdown} - - - - - - - => { - await MediaDeviceHandler.setAudioNoiseSuppression(v); - this.setState({ audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression() }); - }} - label={_t("settings|voip|noise_suppression")} - data-testid="voice-noise-suppression" - /> - => { - await MediaDeviceHandler.setAudioEchoCancellation(v); - this.setState({ audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation() }); - }} - label={_t("settings|voip|echo_cancellation")} - data-testid="voice-echo-cancellation" - /> - - - - - - + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + + {requestButton} + + {speakerDropdown} + {microphoneDropdown} + + + + {webcamDropdown} + + + + + + + + + + + + + + + ); } diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx index e456070cce3..a1486087907 100644 --- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx +++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type JSX, useState } from "react"; +import React, { type ChangeEventHandler, type JSX, useCallback, useState } from "react"; import { type Room, EventType, @@ -15,12 +15,12 @@ import { JoinRule, type MatrixClient, } from "matrix-js-sdk/src/matrix"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; import AliasSettings from "../room_settings/AliasSettings"; import { useStateToggle } from "../../../hooks/useStateToggle"; -import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; import { useLocalEcho } from "../../../hooks/useLocalEcho"; import JoinRuleSettings from "../settings/JoinRuleSettings"; import { useRoomState } from "../../../hooks/useRoomState"; @@ -50,6 +50,7 @@ const SpaceSettingsVisibilityTab: React.FC = ({ matrixClient: cli, space const userId = cli.getUserId()!; const joinRule = useRoomState(space, (state) => state.getJoinRule()); + const [guestAccessEnabled, setGuestAccessEnabled] = useLocalEcho( () => space.currentState.getStateEvents(EventType.RoomGuestAccess, "")?.getContent()?.guest_access === @@ -65,6 +66,10 @@ const SpaceSettingsVisibilityTab: React.FC = ({ matrixClient: cli, space ), () => setError(_t("room_settings|visibility|error_update_guest_access")), ); + const onGuestAccessEnabledChanged = useCallback>( + (e) => setGuestAccessEnabled(e.target.checked), + [setGuestAccessEnabled], + ); const [historyVisibility, setHistoryVisibility] = useLocalEcho( () => space.currentState.getStateEvents(EventType.RoomHistoryVisibility, "")?.getContent()?.history_visibility || @@ -103,19 +108,15 @@ const SpaceSettingsVisibilityTab: React.FC = ({ matrixClient: cli, space {showAdvancedSection && ( -
- -

- {_t("room_settings|visibility|guest_access_explainer")} -
- {_t("room_settings|visibility|guest_access_explainer_public_space")} -

-
+ )}
); @@ -155,26 +156,32 @@ const SpaceSettingsVisibilityTab: React.FC = ({ matrixClient: cli, space onError={(): void => setError(_t("room_settings|visibility|error_failed_save"))} closeSettingsFn={closeSettingsFn} /> - {advancedSection} -
- { + { + evt.preventDefault(); + evt.stopPropagation(); + }} + > + {advancedSection} + { setHistoryVisibility( - checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared, + evt.target.checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared, ); }} + helpMessage={_t("room_settings|visibility|history_visibility_anyone_space_description")} disabled={!canSetHistoryVisibility} + disabledMessage={_t("room_settings|visibility|history_visibility_anyone_space_disabled")} label={_t("room_settings|visibility|history_visibility_anyone_space")} />

- {_t("room_settings|visibility|history_visibility_anyone_space_description")} -
{_t("room_settings|visibility|history_visibility_anyone_space_recommendation")}

-
+ {addressesSection} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b4baa65901f..d4dab3a4672 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2278,6 +2278,8 @@ "no_aliases_space": "This space has no local addresses", "other_section": "Other", "publish_toggle": "Publish this room to the public in %(domain)s's room directory?", + "publish_warn_invite_only": "You cannot publish a room that is invite-only.", + "publish_warn_no_canonical_permission": "You must have permission to set the main address to publish this room.", "published_aliases_description": "To publish an address, it needs to be set as a local address first.", "published_aliases_explainer_room": "Published addresses can be used by anyone on any server to join your room.", "published_aliases_explainer_space": "Published addresses can be used by anyone on any server to join your space.", @@ -2428,11 +2430,12 @@ "error_failed_save": "Failed to update the visibility of this space", "error_update_guest_access": "Failed to update the guest access of this space", "error_update_history_visibility": "Failed to update the history visibility of this space", - "guest_access_explainer": "Guests can join a space without having an account.", - "guest_access_explainer_public_space": "This may be useful for public spaces.", + "guest_access_disabled": "You do not have permission to change guest access.", + "guest_access_explainer": "Guests can join a space without having an account. This may be useful for public spaces.", "guest_access_label": "Enable guest access", "history_visibility_anyone_space": "Preview Space", "history_visibility_anyone_space_description": "Allow people to preview your space before they join.", + "history_visibility_anyone_space_disabled": "You do not have permission to change history visibilty.", "history_visibility_anyone_space_recommendation": "Recommended for public spaces.", "title": "Visibility" }, diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 1140d24ed8e..0f9127cfc91 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -945,6 +945,10 @@ export const SETTINGS: Settings = { default: false, displayName: _td("settings|appearance|custom_font"), controller: new SystemFontController(), + description: () => + _t("settings|appearance|custom_font_description", { + brand: SdkConfig.get().brand, + }), }, "systemFont": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, @@ -1106,10 +1110,12 @@ export const SETTINGS: Settings = { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, default: false, controller: new NotificationsEnabledController(), + displayName: _td("settings|notifications|enable_desktop_notifications_session"), }, "deviceNotificationsEnabled": { supportedLevels: [SettingLevel.DEVICE], default: true, + displayName: _td("settings|notifications|enable_notifications_device"), }, "notificationSound": { supportedLevels: LEVELS_ROOM_OR_ACCOUNT, @@ -1121,10 +1127,12 @@ export const SETTINGS: Settings = { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, default: true, controller: new NotificationBodyEnabledController(), + displayName: _td("settings|notifications|show_message_desktop_notification"), }, "audioNotificationsEnabled": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, default: true, + displayName: _td("settings|notifications|enable_audible_notifications_session"), }, "enableWidgetScreenshots": { supportedLevels: LEVELS_ACCOUNT_SETTINGS, diff --git a/test/unit-tests/components/views/dialogs/CreateRoomDialog-test.tsx b/test/unit-tests/components/views/dialogs/CreateRoomDialog-test.tsx index ad3dcd58e9a..3e4749b3141 100644 --- a/test/unit-tests/components/views/dialogs/CreateRoomDialog-test.tsx +++ b/test/unit-tests/components/views/dialogs/CreateRoomDialog-test.tsx @@ -26,9 +26,6 @@ describe("", () => { }); const getE2eeEnableToggleInputElement = () => screen.getByLabelText("Enable end-to-end encryption"); - // labelled toggle switch doesn't set the disabled attribute, only aria-disabled - const getE2eeEnableToggleIsDisabled = () => - getE2eeEnableToggleInputElement().getAttribute("aria-disabled") === "true"; beforeEach(() => { mockClient.doesServerForceEncryptionForPreset.mockResolvedValue(false); @@ -66,7 +63,7 @@ describe("", () => { await flushPromises(); expect(getE2eeEnableToggleInputElement()).not.toBeChecked(); - expect(getE2eeEnableToggleIsDisabled()).toBeFalsy(); + expect(getE2eeEnableToggleInputElement()).not.toBeDisabled(); expect( screen.getByText( "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.", @@ -86,7 +83,7 @@ describe("", () => { await flushPromises(); expect(getE2eeEnableToggleInputElement()).not.toBeChecked(); - expect(getE2eeEnableToggleIsDisabled()).toBeTruthy(); + expect(getE2eeEnableToggleInputElement()).toBeDisabled(); expect( screen.getByText( "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.", @@ -106,7 +103,7 @@ describe("", () => { await flushPromises(); // encryption enabled expect(getE2eeEnableToggleInputElement()).toBeChecked(); - expect(getE2eeEnableToggleIsDisabled()).toBeFalsy(); + expect(getE2eeEnableToggleInputElement()).not.toBeDisabled(); }); it("should use defaultEncrypted prop when it is false", async () => { @@ -122,7 +119,7 @@ describe("", () => { // encryption disabled expect(getE2eeEnableToggleInputElement()).not.toBeChecked(); // not forced to off - expect(getE2eeEnableToggleIsDisabled()).toBeFalsy(); + expect(getE2eeEnableToggleInputElement()).not.toBeDisabled(); }); it("should override defaultEncrypted when server .well-known forces disabled encryption", async () => { @@ -137,7 +134,7 @@ describe("", () => { // server forces encryption to disabled, even though defaultEncrypted is false expect(getE2eeEnableToggleInputElement()).not.toBeChecked(); - expect(getE2eeEnableToggleIsDisabled()).toBeTruthy(); + expect(getE2eeEnableToggleInputElement()).toBeDisabled(); expect( screen.getByText( "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.", @@ -152,7 +149,7 @@ describe("", () => { // server forces encryption to enabled, even though defaultEncrypted is true expect(getE2eeEnableToggleInputElement()).toBeChecked(); - expect(getE2eeEnableToggleIsDisabled()).toBeTruthy(); + expect(getE2eeEnableToggleInputElement()).toBeDisabled(); expect(screen.getByText("Your server requires encryption to be enabled in private rooms.")).toBeDefined(); }); @@ -162,7 +159,7 @@ describe("", () => { await flushPromises(); expect(getE2eeEnableToggleInputElement()).toBeChecked(); - expect(getE2eeEnableToggleIsDisabled()).toBeTruthy(); + expect(getE2eeEnableToggleInputElement()).toBeDisabled(); expect(screen.getByText("Your server requires encryption to be enabled in private rooms.")).toBeDefined(); }); @@ -255,7 +252,7 @@ describe("", () => { it("should create a knock room with public visibility", async () => { fireEvent.click( - screen.getByRole("checkbox", { name: "Make this room visible in the public room directory." }), + screen.getByRole("switch", { name: "Make this room visible in the public room directory." }), ); fireEvent.click(screen.getByText("Create room")); await flushPromises(); diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap index c2ca9a56803..64dd8208f68 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap @@ -31,67 +31,77 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = ` Are you sure you want to decline the invitation to join "foo"?

-
- Ignore user + +
+
+
+ You will not see any messages or room invites from this user. - -
-
-
- Report room + +
+
+
+ Report this room to your account provider. - -
-
-
+

Options

- + +
+
+
-
+
- + +
+
+
-
+
-
+ class="_container_19o42_10" + > + +
+
-
-
-
- -
- -
+
+
+ +
+ +
+
+
Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them. @@ -65,28 +65,34 @@ exports[`ReportRoomDialog displays admin message 1`] = `

-
- Leave room + +
- +
-
+
", () => { setShareType(getByText, LocationShareType.Live); - expect(getByText("OK").hasAttribute("disabled")).toBeTruthy(); + expect(getByText("OK")).toHaveAttribute("aria-disabled", "true"); }); it("enables OK button when labs flag is toggled to enabled", () => { @@ -310,7 +310,7 @@ describe("", () => { fireEvent.click(getByLabelText("Enable live location sharing")); - expect(getByText("OK").hasAttribute("disabled")).toBeFalsy(); + expect(getByText("OK")).not.toHaveAttribute("aria-disabled", "true"); }); it("enables live share setting on ok button submit", () => { diff --git a/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap index 3ab56061be7..5a7bc0a18d7 100644 --- a/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap +++ b/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap @@ -18,41 +18,50 @@ exports[` with live location disabled goes to labs flag scr > Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.

-
-
- Enable live location sharing +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + +
-
- + +
`; diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap index be6fdd5fcf4..fea2a68e381 100644 --- a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap +++ b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap @@ -213,6 +213,7 @@ exports[` has button to edit topic 1`] = ` aria-hidden="true" class="_input_19o42_24" id="«rv»" + role="switch" type="checkbox" />
renders the room summary 1`] = ` aria-hidden="true" class="_input_19o42_24" id="«r5»" + role="switch" type="checkbox" />
renders the room topic in the summary 1`] = ` aria-hidden="true" class="_input_19o42_24" id="«ri»" + role="switch" type="checkbox" />
{ }); function renderComponent() { - return render(, withClientContextRenderOptions(client)); + return render( + + + , + withClientContextRenderOptions(client), + ); } it("should display the correct preview when the setting is in a loading state", () => { diff --git a/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap b/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap index 017f4bc2bbb..3afe325a98b 100644 --- a/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap +++ b/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap @@ -2,235 +2,269 @@ exports[`UrlPreviewSettings should display the correct preview when the room is encrypted and the url preview is enabled 1`] = ` -
- - URL Previews - -
+ + URL Previews +
-

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

-

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

+
+

+ 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. +

+

+ 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. +

+
-
-
-
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+ + `; exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is disabled 1`] = ` -
- - URL Previews - -
+ + URL Previews +
-

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

-

- - You have - -

- disabled +

+ 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. +

+

+ + You have + +

+
+ disabled +
+ URL previews by default. +

- URL previews by default. -

-

-
-
-
- URL previews are disabled by default for participants in this room.
- +
+ URL previews are disabled by default for participants in this room. +
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+ + `; exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is enabled 1`] = ` -
- - URL Previews - -
+ + URL Previews +
-

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

-

- - You have - -

- enabled +

+ 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. +

+

+ + You have + +

+
+ enabled +
+ URL previews by default. +

- URL previews by default. -

-

-
-
-
- URL previews are enabled by default for participants in this room.
- +
+ URL previews are enabled by default for participants in this room. +
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+ + `; exports[`UrlPreviewSettings should display the correct preview when the setting is in a loading state 1`] = ` -
- - URL Previews - -
- - - -
-
+ URL Previews + +
+ + + +
+ + `; diff --git a/test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx b/test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx index 5d3f1709e29..5ff5f888c79 100644 --- a/test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx +++ b/test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx @@ -70,12 +70,12 @@ describe("", () => { await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true); await renderLayoutSwitcher(); - expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeChecked(); + expect(screen.getByRole("switch", { name: "Show compact text and messages" })).toBeChecked(); }); it("should change the setting when toggled", async () => { await renderLayoutSwitcher(); - act(() => screen.getByRole("checkbox", { name: "Show compact text and messages" }).click()); + act(() => screen.getByRole("switch", { name: "Show compact text and messages" }).click()); await waitFor(() => expect(SettingsStore.getValue("useCompactLayout")).toBe(true)); }); @@ -83,7 +83,7 @@ describe("", () => { it("should be disabled when the modern layout is not enabled", async () => { await SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); await renderLayoutSwitcher(); - expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeDisabled(); + expect(screen.getByRole("switch", { name: "Show compact text and messages" })).toBeDisabled(); }); }); }); diff --git a/test/unit-tests/components/views/settings/Notifications-test.tsx b/test/unit-tests/components/views/settings/Notifications-test.tsx index 1566013aba6..864ca485fa7 100644 --- a/test/unit-tests/components/views/settings/Notifications-test.tsx +++ b/test/unit-tests/components/views/settings/Notifications-test.tsx @@ -347,11 +347,11 @@ describe("", () => { it("renders switches correctly", async () => { await getComponentAndWait(); - expect(screen.getByTestId("notif-master-switch")).toBeInTheDocument(); - expect(screen.getByTestId("notif-device-switch")).toBeInTheDocument(); - expect(screen.getByTestId("notif-setting-notificationsEnabled")).toBeInTheDocument(); - expect(screen.getByTestId("notif-setting-notificationBodyEnabled")).toBeInTheDocument(); - expect(screen.getByTestId("notif-setting-audioNotificationsEnabled")).toBeInTheDocument(); + expect(screen.getByLabelText("Enable notifications for this account")).toBeInTheDocument(); + expect(screen.getByLabelText("Enable notifications for this device")).toBeInTheDocument(); + expect(screen.getByLabelText("Enable desktop notifications for this session")).toBeInTheDocument(); + expect(screen.getByLabelText("Show message in desktop notification")).toBeInTheDocument(); + expect(screen.getByLabelText("Enable audible notifications for this session")).toBeInTheDocument(); }); describe("email switches", () => { @@ -370,7 +370,7 @@ describe("", () => { it("renders email switches correctly when email 3pids exist", async () => { await getComponentAndWait(); - expect(screen.getByTestId("notif-email-switch")).toBeInTheDocument(); + expect(screen.getByLabelText(`Enable email notifications for ${testEmail}`)).toBeInTheDocument(); }); it("renders email switches correctly when notifications are on for email", async () => { @@ -379,14 +379,14 @@ describe("", () => { }); await getComponentAndWait(); - const emailSwitch = screen.getByTestId("notif-email-switch"); - expect(emailSwitch.querySelector('[aria-checked="true"]')).toBeInTheDocument(); + const emailSwitch = screen.getByLabelText(`Enable email notifications for ${testEmail}`); + expect(emailSwitch).toBeChecked(); }); it("enables email notification when toggling on", async () => { await getComponentAndWait(); - const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!; + const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`); fireEvent.click(emailToggle); expect(mockClient.setPusher).toHaveBeenCalledWith( @@ -405,7 +405,7 @@ describe("", () => { mockClient.setPusher.mockRejectedValue({}); await getComponentAndWait(); - const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!; + const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`); fireEvent.click(emailToggle); // force render @@ -431,7 +431,7 @@ describe("", () => { mockClient.getPushers.mockResolvedValue({ pushers: [testPusher] }); await getComponentAndWait(); - const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!; + const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`); fireEvent.click(emailToggle); expect(mockClient.removePusher).toHaveBeenCalledWith(testPusher.pushkey, testPusher.app_id); @@ -452,22 +452,20 @@ describe("", () => { it("toggles and sets settings correctly", async () => { await getComponentAndWait(); - let audioNotifsToggle!: HTMLDivElement; + let audioNotifsToggle!: HTMLInputElement; const update = () => { - audioNotifsToggle = screen - .getByTestId("notif-setting-audioNotificationsEnabled") - .querySelector('div[role="switch"]')!; + audioNotifsToggle = screen.getByLabelText("Enable audible notifications for this session"); }; update(); - expect(audioNotifsToggle.getAttribute("aria-checked")).toEqual("true"); + expect(audioNotifsToggle).toBeChecked(); expect(SettingsStore.getValue("audioNotificationsEnabled")).toEqual(true); fireEvent.click(audioNotifsToggle); update(); - expect(audioNotifsToggle.getAttribute("aria-checked")).toEqual("false"); + expect(audioNotifsToggle).not.toBeChecked(); expect(SettingsStore.getValue("audioNotificationsEnabled")).toEqual(false); }); }); diff --git a/test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx b/test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx index f1dbc9a2e0d..5332845d1be 100644 --- a/test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx +++ b/test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx @@ -56,24 +56,24 @@ describe("", () => { describe("system theme", () => { it("should disable Match system theme", async () => { render(); - expect(screen.getByRole("checkbox", { name: "Match system theme" })).not.toBeChecked(); + expect(screen.getByRole("switch", { name: "Match system theme" })).not.toBeChecked(); }); it("should enable Match system theme", async () => { await enableSystemTheme(true); render(); - expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked(); + expect(screen.getByRole("switch", { name: "Match system theme" })).toBeChecked(); }); it("should change the system theme when clicked", async () => { jest.spyOn(SettingsStore, "setValue"); render(); - act(() => screen.getByRole("checkbox", { name: "Match system theme" }).click()); + act(() => screen.getByRole("switch", { name: "Match system theme" }).click()); // The system theme should be enabled - expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked(); + expect(screen.getByRole("switch", { name: "Match system theme" })).toBeChecked(); expect(SettingsStore.setValue).toHaveBeenCalledWith("use_system_theme", null, "device", true); }); }); diff --git a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap index 6c99c3fbeb3..714703c0d07 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap @@ -418,6 +418,7 @@ exports[` should render 1`] = ` class="_input_19o42_24" id="radix-«rr»" name="compactLayout" + role="switch" title="" type="checkbox" /> diff --git a/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap index ae8a4aa46ed..67091f7f028 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap @@ -2,94 +2,114 @@ exports[` main notification switches renders only enable notifications switch when notifications are disabled 1`] = `
-
-
- Enable notifications for this account +
+ +
+
- - Turn off to disable notifications on all your devices and sessions - - -
-
-
-
-
- -
-
-
- +
+ +
+
+
+
+ +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+ +
`; diff --git a/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap index 025afc3c97c..cbf023e5c5b 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SetIntegrationManager should render manage integrations sections 1`] = ` -

(scalar.vector.im)

@@ -25,6 +26,7 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
Use an integration manager @@ -39,40 +41,36 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] = > Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
-
+
- -
-
+ class="_ui_19o42_34" + />
-
+
+
+ Enable the integration manager +
- -
+
+ `; diff --git a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap index 487a6742743..01f5b8b0978 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap @@ -34,6 +34,7 @@ exports[` custom theme should display custom theme 1`] = ` class="_input_19o42_24" id="radix-«r28»" name="systemTheme" + role="switch" title="" type="checkbox" /> @@ -312,6 +313,7 @@ exports[` custom theme should render the custom theme sectio class="_input_19o42_24" id="radix-«r10»" name="systemTheme" + role="switch" title="" type="checkbox" /> @@ -590,6 +592,7 @@ exports[` renders the theme choice UI 1`] = ` class="_input_19o42_24" id="radix-«r0»" name="systemTheme" + role="switch" title="" type="checkbox" /> diff --git a/test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx b/test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx index ad98fa4e438..1876b607bb5 100644 --- a/test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx +++ b/test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx @@ -74,7 +74,7 @@ describe("", () => { await renderAdvancedPanel(); expect(screen.getByTestId("otherSettings")).toMatchSnapshot(); - const checkbox = screen.getByRole("checkbox", { + const checkbox = screen.getByRole("switch", { name: "In encrypted rooms, only send messages to verified users", }); expect(checkbox).toBeChecked(); diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap index 6fc4a568417..886f93fc949 100644 --- a/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap +++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap @@ -224,6 +224,7 @@ exports[` should display the blacklist of unv class="_input_19o42_24" id="radix-«r6»" name="neverSendEncrypted" + role="switch" title="" type="checkbox" /> diff --git a/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx b/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx index d33b5c4e262..92cc5c70e0b 100644 --- a/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx +++ b/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx @@ -114,7 +114,7 @@ describe("", () => { expect(screen.container).toMatchSnapshot(); const globalMute = screen.getByLabelText(labelGlobalMute); - expect(globalMute).toHaveAttribute("aria-disabled", "true"); + expect(globalMute).toBeDisabled(); const levelAllMessages = screen.getByLabelText(labelLevelAllMessage); expect(levelAllMessages).toBeDisabled(); diff --git a/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap index 6ec9599fe1e..a95dfb6a652 100644 --- a/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap +++ b/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap @@ -11,966 +11,1008 @@ exports[` correctly handles the loading/disabled state 1`] = `
-
-
- Enable notifications for this account +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + +
-
-
-
- Enable desktop notifications for this session +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + +
-
-
-
- Show message preview in desktop notification +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + +
-
-
-
- Enable audible notifications for this session +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + +
-
-
-
-

- I want to be notified for (Default Setting) -

-
- This setting will be applied by default to all your rooms. +

+ I want to be notified for (Default Setting) +

-
-
-
-
-
+
+
-
-
- +
- - + +
+
+ +
+ +
+
+
-
+
+ - Notify when someone uses a keyword + Enter keywords here, or use for spelling variations or nicknames - - +
+
+
+
+
+
+ +
-
- -
-
-
+ Add +
+ +
+
+
- - + +
+
- Add +
- -
-
-
- +
-
-
-
- -
+
+ +
+
+
+ class="_inline-field-body_19upo_38" + > + +
-
-
-
-

- Email summary -

-
- Receive an email summary of missed notifications +

+ Email summary +

- - Select which emails you want to send summaries to. Manage your emails in -
- General -
- . - + Receive an email summary of missed notifications +
+
+
+ + Select which emails you want to send summaries to. Manage your emails in +
+ General +
+ . + +
+
-
-
-
-

- Quick Actions -

-
-
+

+ Quick Actions +

+
- Reset to default settings +
+ Reset to default settings +
-
+
@@ -988,1244 +1030,1285 @@ exports[` matches the snapshot 1`] = `
-
-
+
+ +
+
+
+
- Enable notifications for this account +
- +
-
-
-
- -
- Enable desktop notifications for this session +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + +
-
-
-
- Show message preview in desktop notification +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + +
-
-
-
- Enable audible notifications for this session +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + +
-
-
-
-

- I want to be notified for (Default Setting) -

-
- This setting will be applied by default to all your rooms. +

+ I want to be notified for (Default Setting) +

-
-
-
-
-
-
-
- +
- - + +
+
+ +
+ +
+
+
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+ + + Enter keywords here, or use for spelling variations or nicknames + +
+
+
+
+
+
+
-
- -
-
-
+
+ Add +
+
+ justjann3
- -
- -
+ +
- + + +
-
- -
-
-
-
+ justj4nne
- -
- -
+ +
- - - Enter keywords here, or use for spelling variations or nicknames - + + +
-
- -
-
-
-
- - -
-
- Add -
-
-
-
- justjann3
- - - + + + +
-
-
- justj4nn3
- - - + + + +
-
-
- justj4nne
- - - + + + +
-
-
- Janne
- - - + + + +
-
-
- J4nne
- - - + + + +
+
+
- Jann3
- - - + +
- jann3 -
- - - -
+ Show all activity in the room list (dots or number of unread messages) +
+
+
- j4nne
- - - + +
- janne -
- - - -
+ Only show notifications in the thread activity centre +
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-

- Email summary -

- Receive an email summary of missed notifications +

+ Email summary +

- - Select which emails you want to send summaries to. Manage your emails in -
- General -
- . - + Receive an email summary of missed notifications
-
-
-
-
+ Select which emails you want to send summaries to. Manage your emails in +
+ General +
+ . + +
+
+
+
+
-
- +
- - + +
-
-
- + + test@example.tld + + +
-
- + +
-
-
-

- Notification targets -

-
-
-
    -
  • - My EyeFon -
    • -
-
-
-
-
-

+ Notification targets +

+
+
- Quick Actions - +
    +
  • + My EyeFon +
    • +
+
- Reset to default settings +

+ Quick Actions +

+
+
+
+ Reset to default settings +
-
+
diff --git a/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx b/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx index bb5300fc03d..8777a5bbc03 100644 --- a/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx +++ b/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx @@ -169,7 +169,7 @@ describe("", () => { fireEvent.click(screen.getByText("Show advanced")); - expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("false"); + expect(screen.getByLabelText("Enable guest access")).not.toBeChecked(); }); it("updates guest access on toggle", () => { @@ -181,7 +181,7 @@ describe("", () => { fireEvent.click(screen.getByLabelText("Enable guest access")); // toggle set immediately - expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("true"); + expect(screen.getByLabelText("Enable guest access")).toBeChecked(); expect(client.sendStateEvent).toHaveBeenCalledWith( room.roomId, @@ -202,14 +202,14 @@ describe("", () => { fireEvent.click(screen.getByLabelText("Enable guest access")); // toggle set immediately - expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("false"); + expect(screen.getByLabelText("Enable guest access")).not.toBeChecked(); await flushPromises(); expect(client.sendStateEvent).toHaveBeenCalled(); expect(logger.error).toHaveBeenCalledWith("oups"); // toggle reset to old value - expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("true"); + expect(screen.getByLabelText("Enable guest access")).toBeChecked(); }); }); @@ -305,7 +305,7 @@ describe("", () => { await waitFor(() => expect(screen.getByLabelText("Encrypted")).toBeChecked()); // can't disable encryption once enabled - expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true"); + expect(screen.getByLabelText("Encrypted")).toBeDisabled(); }); it("asks users to confirm when setting room to encrypted", async () => { @@ -412,7 +412,7 @@ describe("", () => { getComponent(room); await waitFor(() => expect(screen.getByLabelText("Encrypted")).toBeChecked()); - expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true"); + expect(screen.getByLabelText("Encrypted")).toBeDisabled(); expect(screen.getByText("Once enabled, encryption cannot be disabled.")).toBeInTheDocument(); }); @@ -422,7 +422,7 @@ describe("", () => { getComponent(room); await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked()); - expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true"); + expect(screen.getByLabelText("Encrypted")).toBeDisabled(); expect(screen.queryByText("Once enabled, encryption cannot be disabled.")).not.toBeInTheDocument(); expect(screen.getByText("Your server requires encryption to be disabled.")).toBeInTheDocument(); }); diff --git a/test/unit-tests/components/views/settings/tabs/room/VoipRoomSettingsTab-test.tsx b/test/unit-tests/components/views/settings/tabs/room/VoipRoomSettingsTab-test.tsx index 4184e76360c..2e248fcc815 100644 --- a/test/unit-tests/components/views/settings/tabs/room/VoipRoomSettingsTab-test.tsx +++ b/test/unit-tests/components/views/settings/tabs/room/VoipRoomSettingsTab-test.tsx @@ -43,7 +43,7 @@ describe("VoipRoomSettingsTab", () => { }; const getElementCallSwitch = (tab: RenderResult): HTMLElement => { - return tab.container.querySelector("[data-testid='element-call-switch']")!; + return tab.getByLabelText("Enable Element Call as an additional calling option in this room")!; }; describe("correct state", () => { @@ -52,7 +52,7 @@ describe("VoipRoomSettingsTab", () => { const tab = renderTab(); - expect(getElementCallSwitch(tab).querySelector("[aria-checked='true']")).toBeTruthy(); + expect(getElementCallSwitch(tab)).toBeChecked(); }); it.each([1, 50, 100])("shows disabled when call member power level is 0", (level: number) => { @@ -60,7 +60,7 @@ describe("VoipRoomSettingsTab", () => { const tab = renderTab(); - expect(getElementCallSwitch(tab).querySelector("[aria-checked='false']")).toBeTruthy(); + expect(getElementCallSwitch(tab)).not.toBeChecked(); }); }); @@ -75,7 +75,7 @@ describe("VoipRoomSettingsTab", () => { const tab = renderTab(); - fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!); + fireEvent.click(getElementCallSwitch(tab)); await waitFor(() => expect(cli.sendStateEvent).toHaveBeenCalledWith( room.roomId, @@ -95,7 +95,7 @@ describe("VoipRoomSettingsTab", () => { const tab = renderTab(); - fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!); + fireEvent.click(getElementCallSwitch(tab)); await waitFor(() => expect(cli.sendStateEvent).toHaveBeenCalledWith( room.roomId, @@ -116,7 +116,7 @@ describe("VoipRoomSettingsTab", () => { const tab = renderTab(); - fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!); + fireEvent.click(getElementCallSwitch(tab)); await waitFor(() => expect(cli.sendStateEvent).toHaveBeenCalledWith( room.roomId, diff --git a/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx b/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx index 0918b7809f4..b0f17fae4c5 100644 --- a/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx +++ b/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx @@ -89,7 +89,7 @@ describe("PreferencesUserSettingsTab", () => { renderTab(); const toggle = await screen.findByRole("switch", { name: "Allow spell check" }); - expect(toggle).toHaveAttribute("aria-checked", "false"); + expect(toggle).not.toBeDisabled(); await userEvent.click(toggle); @@ -149,7 +149,7 @@ describe("PreferencesUserSettingsTab", () => { mockGetValue(false); const toggle = getToggle(); - await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false")); + await waitFor(() => expect(toggle).not.toBeDisabled()); fireEvent.click(toggle); expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, true); }); @@ -158,7 +158,7 @@ describe("PreferencesUserSettingsTab", () => { mockGetValue(true); const toggle = getToggle(); - await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false")); + await waitFor(() => expect(toggle).not.toBeDisabled()); fireEvent.click(toggle); expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, false); }); @@ -172,8 +172,8 @@ describe("PreferencesUserSettingsTab", () => { it("is forcibly enabled", async () => { const toggle = getToggle(); await waitFor(() => { - expect(toggle).toHaveAttribute("aria-checked", "true"); - expect(toggle).toHaveAttribute("aria-disabled", "true"); + expect(toggle).toBeChecked(); + expect(toggle).toBeDisabled(); }); }); @@ -181,7 +181,8 @@ describe("PreferencesUserSettingsTab", () => { mockGetValue(true); const toggle = getToggle(); - await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "true")); + await waitFor(() => expect(toggle).toBeDisabled()); + console.log(toggle.innerHTML); fireEvent.click(toggle); expect(SettingsStore.setValue).not.toHaveBeenCalled(); }); diff --git a/test/unit-tests/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx b/test/unit-tests/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx index d4519d429a8..b30ed7a7168 100644 --- a/test/unit-tests/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx +++ b/test/unit-tests/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx @@ -113,10 +113,10 @@ describe("", () => { }); it("renders audio processing settings", () => { - const { getByTestId } = render(getComponent()); - expect(getByTestId("voice-auto-gain")).toBeTruthy(); - expect(getByTestId("voice-noise-suppression")).toBeTruthy(); - expect(getByTestId("voice-echo-cancellation")).toBeTruthy(); + const { getByRole } = render(getComponent()); + expect(getByRole("switch", { name: "Automatically adjust the microphone volume" })).toBeTruthy(); + expect(getByRole("switch", { name: "Noise suppression" })).toBeTruthy(); + expect(getByRole("switch", { name: "Echo cancellation" })).toBeTruthy(); }); it("sets and displays audio processing settings", () => { diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap index 6c0407a9e8e..1f2832b3c78 100644 --- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap +++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap @@ -145,24 +145,24 @@ exports[`AppearanceUserSettingsTab should render 1`] = ` role="separator" />
-
-

- Message layout -

-
-
-
+ Message layout + +
+
- -
-
-
+ class="_container_19o42_10" + > + +
+
-
-
- - - Modern layout must be selected to use this feature. - + + + Modern layout must be selected to use this feature. + +
-
-
+ +
+ - +
-
-

- Room list -

-
-
- + Room list + +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+
-

- Spaces -

-
-
+

+ Spaces +

+
-
-
-
+
-

- Keyboard shortcuts -

-
-
- - To view all keyboard shortcuts, -
- click here -
- . - +

+ Keyboard shortcuts +

-
-
- +
+
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+
-

- Displaying time -

-
-
+

+ Displaying time +

+
- Set timezone
+ Set timezone
-
-
-
-
-
-
- -
+
+ +
+
+
+ class="_inline-field-body_19upo_38" + > + +
-
-
- +
+ +
+
+
+
+ +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ + + labs|extended_profiles_msc_support + +
-
-
+
-

- Presence -

-
-
- Share your activity and status with others. +

+ Presence +

-
-
-
-
+ Share your activity and status with others.
- +
+ +
+
+
+
+ + + settings|send_read_receipts_unsupported + +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+
-

- Composer -

-
-
- -
-
-
+ Composer +
-
-
-
+
-

- Code blocks -

-
-
- -
-
-
+ Code blocks +
-
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
- +
+ +
+
+
+
+ +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+
-

- Images, GIFs and videos -

-
-
- -
-
-
+ Images, GIFs and videos +
-
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
- +
+ +
+
+
+
+ +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+
-

- Timeline -

-
-
+

+ Timeline +

+
- +
+ +
+
+
+
+ +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
- +
+ +
+
+
+
+ +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
-
+
+
+
+ +
+
+
+
- Show read receipts sent by other users - - + +
+
-
-
-
- -
+
+ +
+
+
-
-
-
- + +
+
-
-
-
- -
+
+ +
+
+
-
-
-
- + +
+
-
-
-
- -
+
+ +
+
+
-
-
-
- + +
+
-
-
-
- -
+
+ +
+
+
-
-
-
- + +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+
-

- Moderation and safety -

-
-
- + Moderation and safety + +
+
-
- Hide avatars of room and inviter + +
- +
-
+
A hidden media can always be shown by tapping on it @@ -1296,181 +1531,213 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
- -
-
-
- Allow users to invite you to rooms +
+ +
+
- -
+ class="_inline-field-body_19upo_38" + > + + + Your server does not implement this feature. + +
-
- + +
+ - -
+
-

- Room directory -

-
-
- + Room directory + +
+
+ class="_inline-field-control_19upo_44" + > +
+ +
+
+
+
+ +
-
-
+
-

- General -

-
-
- + General + +
+
+
+ +
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+ +
-
-
- - -
-
- - -
-
- -
-
+
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap index ffa91ae7b11..edfa0b17e1b 100644 --- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap +++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap @@ -34,8 +34,8 @@ exports[` renders security section 1`] = `
-
renders security section 1`] = `

(scalar.vector.im)

@@ -58,6 +59,7 @@ exports[` renders security section 1`] = `
Use an integration manager @@ -72,92 +74,92 @@ exports[` renders security section 1`] = ` > Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
-
+
- -
-
+ class="_ui_19o42_34" + />
-
+
+
+ Enable the integration manager +
- -
-
+ +
-

- Encryption -

+

+ Encryption +

-

- Message search -

-
-
+

+ Message search +

+
- - Element can't securely cache encrypted messages locally while running in a web browser. Use - - Element Desktop - - - for encrypted messages to appear in search results. - +
+ + Element can't securely cache encrypted messages locally while running in a web browser. Use + + Element Desktop + + + for encrypted messages to appear in search results. + +
-
+
@@ -213,7 +215,7 @@ exports[` renders security section 1`] = ` > @@ -222,7 +224,7 @@ exports[` renders security section 1`] = ` > renders security section 1`] = `
+
", () => { await toggleGuestAccessSection(component); const guestAccessInput = getGuestAccessToggle(component); - expect(guestAccessInput?.getAttribute("aria-checked")).toEqual("true"); + expect(guestAccessInput).toBeChecked(); fireEvent.click(guestAccessInput!); expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith( @@ -162,7 +162,7 @@ describe("", () => { ); // toggled off - expect(guestAccessInput?.getAttribute("aria-checked")).toEqual("false"); + expect(guestAccessInput).not.toBeChecked(); }); it("renders error message when update fails", async () => { @@ -184,7 +184,7 @@ describe("", () => { await toggleGuestAccessSection(component); - expect(getGuestAccessToggle(component)?.getAttribute("aria-disabled")).toEqual("true"); + expect(getGuestAccessToggle(component)).toBeDisabled(); }); }); @@ -194,7 +194,7 @@ describe("", () => { const component = getComponent({ space }); // toggle off because space settings is != WorldReadable - expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false"); + expect(getHistoryVisibilityToggle(component)).not.toBeChecked(); }); it("updates history visibility on toggle", () => { @@ -202,7 +202,7 @@ describe("", () => { const component = getComponent({ space }); // toggle off because space settings is != WorldReadable - expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false"); + expect(getHistoryVisibilityToggle(component)).not.toBeChecked(); fireEvent.click(getHistoryVisibilityToggle(component)!); expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith( @@ -212,7 +212,7 @@ describe("", () => { "", ); - expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("true"); + expect(getHistoryVisibilityToggle(component)).toBeChecked(); }); it("renders error message when history update fails", async () => { @@ -231,7 +231,7 @@ describe("", () => { const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule); (space.currentState.maySendStateEvent as jest.Mock).mockReturnValue(false); const component = getComponent({ space }); - expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-disabled")).toEqual("true"); + expect(getHistoryVisibilityToggle(component)).toBeDisabled(); }); }); diff --git a/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap index 9e9ab218bc6..c66b7399be9 100644 --- a/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap +++ b/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap @@ -1,18 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` for a public space Access renders guest access section toggle 1`] = ` -
-
-
+ type="checkbox" +/> `; exports[` renders container 1`] = ` @@ -112,42 +107,53 @@ exports[` renders container 1`] = ` > Anyone can find and join. -
-
- Preview Space + +
- +
-
+ + + Allow people to preview your space before they join. +

- Allow people to preview your space before they join. -
Recommended for public spaces.

-
+
diff --git a/yarn.lock b/yarn.lock index 69b07691f45..48ba5793d55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4525,10 +4525,10 @@ resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-5.0.1.tgz#341edcc860a7200ad38ba1f4a0a8f5f43ff5174f" integrity sha512-PbxhjfHsVGBmrioM7iZ1wgcG8KIZRcnHIJhhEpWascWQwJ9lRm1K7ixV7sjwPWYQlmweSUB8jz4qmp7VTrxWng== -"@vector-im/compound-web@^8.1.2": - version "8.1.2" - resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.1.2.tgz#a8af8681b442e63e07b8f25204528b1b022c1db2" - integrity sha512-F9UyQBwRThwju+STz84iJy6JGWQ7UIxaprstfsGpiyS/3ror4E6m/mfwbrNjT0l3fhrhk6sRiTAMlcBRzYgdMQ== +"@vector-im/compound-web@^8.2.0": + version "8.2.0" + resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.2.0.tgz#64193ce8d0c62a99e566cdb3bf4602160575ef3e" + integrity sha512-we+EQ/pw2YCEl7EMPdpeqP3HZpnQcCuOHoiAYKFwF4doXBDENLpTyA8ZdX0cViT3sqvExPT0RHZ2Nlt5Y6dQNQ== dependencies: "@floating-ui/react" "^0.27.0" "@radix-ui/react-context-menu" "^2.2.1"