Update settings toggles to use consistent design across app. (#30169)

* Use EditInPlace for identity server picker.

* Update test

* Add a test for setting an ID server.

* fix tests

* Reformat other :not sections

* forgot a comma

* Update Apperance settings to use toggle switches.

* Remove unused checkbox setting.

* Remove unused import.

* Update tests

* lint

* update apperance screenshot

* Begin replacing settings

* Refactor RoomPublishSetting

* Remove LabelledToggleSwitch

* Refactor SettingsFlag to use SettingsToggleInput

* Refactor CreateRoomDialog to use SettingsToggleInput

* Refactor DeclineAndBlockInviteDialog to use SettingsToggleInput

* Update DevtoolsDialog

* Refactor ReportRoomDialog to use SettingsToggle

* Update RoomUpgradeWarningDialog to use SettingsToggleInput

* Update WidgetCapabilitiesPromptDialog to use SettingsToggleInput

* Update trivial switchovers

* Update Notifications settings to use SettingsFlag where possible

* Update RoomPublishSetting and SpaceSettingVisibilityTab to use SettingsToggleInput with a warning

* revert changes to field

* Updated screenshots

* Prevent accidental submits

* Replace test ID tests

* Create new snapshot tests

* Add screenshot test for DeclineAndBlockDialog

* Add screenshot for create room dialog.

* Add devtools test

* Add upgrade rooms test

* Add widget capabilites prompt test

* Fix spec

* Add a test for the live location sharing prompt.

* fix copyright

* Add tests for notification settings

* Add tests for user security tab.

* Add test for room security tab.

* Add test for video settings tab.

* remove .only

* Test creating a video room

* Mask the IM name in the header.

* Add spaces vis tab test.

* Fixup unit tests to check correct attributes.

* Various fixes to components for tests.

* lint

* Update compound

* update setting names

* Cleanup tests

prettier

Updates some more playwright tests

Update more snapshots

Update switch

more fixes

drop .only

last screenshot round

fix video room flake

Remove console.logs

Remove roomId from devtools view.

lint

final screenshot

* Add playwright tests

* import pages/ remove duplicate create-room

* Update screenshots

* Fix accessibility for devtools

* Disable region test

* Fixup headers

* remove extra test

* Fix permissions dialog

* fixup tests

* update snapshot

* Update jest tests

* Clear up playwright tests

* update widget screenshot

* Fix wrong snaps from using wrong compound version

* Revert mistaken s/checkbox/switch/

* lint lint

* Update headings

* fix snap

* remove unused

* update snapshot

* update tab screenshot

* Update snapshots

* Fix margins

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Delint

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshot

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshot

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>
Co-authored-by: Michael Telatynski <[email protected]>

Author: Half-Shot

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

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

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

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", '""');

playwright/e2e/settings/appearance-user-settings-tab/index.ts

@@ -84,7 +84,7 @@ class Helpers {
     /**
      * Return the system theme toggle
      */
-    getMatchSystemThemeCheckbox() {
+    getMatchSystemThemeSwitch() {
         return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
     }
 
@@ -216,9 +216,9 @@ class Helpers {
     }
 
     /**
-     * Return the compact layout checkbox
+     * Return the compact layout switch
      */
-    getCompactLayoutCheckbox() {
+    getCompactLayoutSwitch() {
         return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
     }
 

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

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

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -184,11 +184,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 }) => {