New layout selector ui in user settings (#12676)

* feat: reworked the layout switcher

* feat: make the classname optional in EventTilePreview.tsx

* test: add tests to LayoutSwitcher

* feat: change appearance tab

* test: update appearance snapshot

* e2e: add tests

* css: add comment for gap overriding

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

@@ -33,43 +33,6 @@ test.describe("Appearance user settings tab", () => {
         await expect(tab).toMatchScreenshot("appearance-tab.png");
     });
 
-    test("should support switching layouts", async ({ page, user, app }) => {
-        // Create and view a room first
-        await app.client.createRoom({ name: "Test Room" });
-        await app.viewRoomByName("Test Room");
-
-        await app.settings.openUserSettings("Appearance");
-
-        const buttons = page.locator(".mx_LayoutSwitcher_RadioButton");
-
-        // Assert that the layout selected by default is "Modern"
-        await expect(
-            buttons.locator(".mx_StyledRadioButton_enabled", {
-                hasText: "Modern",
-            }),
-        ).toBeVisible();
-
-        // Assert that the room layout is set to group (modern) layout
-        await expect(page.locator(".mx_RoomView_body[data-layout='group']")).toBeVisible();
-
-        // Select the first layout
-        await buttons.first().click();
-        // Assert that the layout selected is "IRC (Experimental)"
-        await expect(buttons.locator(".mx_StyledRadioButton_enabled", { hasText: "IRC (Experimental)" })).toBeVisible();
-
-        // Assert that the room layout is set to IRC layout
-        await expect(page.locator(".mx_RoomView_body[data-layout='irc']")).toBeVisible();
-
-        // Select the last layout
-        await buttons.last().click();
-
-        // Assert that the layout selected is "Message bubbles"
-        await expect(buttons.locator(".mx_StyledRadioButton_enabled", { hasText: "Message bubbles" })).toBeVisible();
-
-        // Assert that the room layout is set to bubble layout
-        await expect(page.locator(".mx_RoomView_body[data-layout='bubble']")).toBeVisible();
-    });
-
     test("should support changing font size by using the font size dropdown", async ({ page, app, user }) => {
         await app.settings.openUserSettings("Appearance");
 
@@ -84,69 +47,61 @@ test.describe("Appearance user settings tab", () => {
         await expect(page).toMatchScreenshot("window-12px.png");
     });
 
-    test("should support enabling compact group (modern) layout", async ({ page, app, user }) => {
-        // Create and view a room first
-        await app.client.createRoom({ name: "Test Room" });
-        await app.viewRoomByName("Test Room");
-
-        await app.settings.openUserSettings("Appearance");
-
-        // Click "Show advanced" link button
-        const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
-        await tab.getByRole("button", { name: "Show advanced" }).click();
-
-        await tab.locator("label", { hasText: "Use a more compact 'Modern' layout" }).click();
-
-        // Assert that the room layout is set to compact group (modern) layout
-        await expect(page.locator("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout")).toBeVisible();
-    });
-
-    test("should disable compact group (modern) layout option on IRC layout and bubble layout", async ({
-        page,
-        app,
-        user,
-    }) => {
+    test("should support enabling system font", async ({ page, app, user }) => {
         await app.settings.openUserSettings("Appearance");
         const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
 
-        const checkDisabled = async () => {
-            await expect(tab.getByRole("checkbox", { name: "Use a more compact 'Modern' layout" })).toBeDisabled();
-        };
-
         // Click "Show advanced" link button
         await tab.getByRole("button", { name: "Show advanced" }).click();
 
-        const buttons = page.locator(".mx_LayoutSwitcher_RadioButton");
-
-        // Enable IRC layout
-        await buttons.first().click();
+        await tab.locator(".mx_Checkbox", { hasText: "Use bundled emoji font" }).click();
+        await tab.locator(".mx_Checkbox", { hasText: "Use a system font" }).click();
 
-        // Assert that the layout selected is "IRC (Experimental)"
-        await expect(buttons.locator(".mx_StyledRadioButton_enabled", { hasText: "IRC (Experimental)" })).toBeVisible();
+        // Assert that the font-family value was removed
+        await expect(page.locator("body")).toHaveCSS("font-family", '""');
+    });
 
-        await checkDisabled();
+    test.describe("Message Layout Panel", () => {
+        test.beforeEach(async ({ app, user, util }) => {
+            await util.createAndDisplayRoom();
+            await util.assertModernLayout();
+            await util.openAppearanceTab();
+        });
 
-        // Enable bubble layout
-        await buttons.last().click();
+        test("should change the message layout from modern to bubble", async ({ page, app, user, util }) => {
+            await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-modern.png");
 
-        // Assert that the layout selected is "IRC (Experimental)"
-        await expect(buttons.locator(".mx_StyledRadioButton_enabled", { hasText: "Message bubbles" })).toBeVisible();
+            await util.getBubbleLayout().click();
 
-        await checkDisabled();
-    });
+            // Assert that modern are irc layout are not selected
+            await expect(util.getBubbleLayout()).toBeChecked();
+            await expect(util.getModernLayout()).not.toBeChecked();
+            await expect(util.getIRCLayout()).not.toBeChecked();
 
-    test("should support enabling system font", async ({ page, app, user }) => {
-        await app.settings.openUserSettings("Appearance");
-        const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
+            // Assert that the room layout is set to bubble layout
+            await util.assertBubbleLayout();
+            await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-bubble.png");
+        });
 
-        // Click "Show advanced" link button
-        await tab.getByRole("button", { name: "Show advanced" }).click();
+        test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => {
+            await expect(util.getCompactLayoutCheckbox()).not.toBeChecked();
 
-        await tab.locator(".mx_Checkbox", { hasText: "Use bundled emoji font" }).click();
-        await tab.locator(".mx_Checkbox", { hasText: "Use a system font" }).click();
+            await util.getCompactLayoutCheckbox().click();
+            await util.assertCompactLayout();
+        });
 
-        // Assert that the font-family value was removed
-        await expect(page.locator("body")).toHaveCSS("font-family", '""');
+        test("should disable compact layout when the modern layout is not selected", async ({
+            page,
+            app,
+            user,
+            util,
+        }) => {
+            await expect(util.getCompactLayoutCheckbox()).not.toBeDisabled();
+
+            // Select the bubble layout, which should disable the compact layout checkbox
+            await util.getBubbleLayout().click();
+            await expect(util.getCompactLayoutCheckbox()).toBeDisabled();
+        });
     });
 
     test.describe("Theme Choice Panel", () => {

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

@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import { Page } from "@playwright/test";
+import { Locator, Page } from "@playwright/test";
 
 import { ElementAppPage } from "../../../pages/ElementAppPage";
 import { test as base, expect } from "../../../element-web-test";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import { Layout } from "../../../../src/settings/enums/Layout";
 
 export { expect };
 
@@ -57,6 +58,21 @@ class Helpers {
         return this.app.settings.openUserSettings("Appearance");
     }
 
+    /**
+     * Compare screenshot and hide the matrix chat
+     * @param locator
+     * @param screenshot
+     */
+    assertScreenshot(locator: Locator, screenshot: `${string}.png`) {
+        return expect(locator).toMatchScreenshot(screenshot, {
+            css: `
+                   #matrixchat {
+                        display: none;
+                    }
+                `,
+        });
+    }
+
     // Theme Panel
 
     /**
@@ -136,4 +152,90 @@ class Helpers {
     removeCustomTheme() {
         return this.getThemePanel().getByRole("listitem", { name: this.CUSTOM_THEME.name }).getByRole("button").click();
     }
+
+    // Message layout Panel
+
+    /**
+     * Create and display a room named Test Room
+     */
+    async createAndDisplayRoom() {
+        await this.app.client.createRoom({ name: "Test Room" });
+        await this.app.viewRoomByName("Test Room");
+    }
+
+    /**
+     * Assert the room layout
+     * @param layout
+     * @private
+     */
+    private assertRoomLayout(layout: Layout) {
+        return expect(this.page.locator(`.mx_RoomView_body[data-layout=${layout}]`)).toBeVisible();
+    }
+
+    /**
+     * Assert the room layout is modern
+     */
+    assertModernLayout() {
+        return this.assertRoomLayout(Layout.Group);
+    }
+
+    /**
+     * Assert the room layout is bubble
+     */
+    assertBubbleLayout() {
+        return this.assertRoomLayout(Layout.Bubble);
+    }
+
+    /**
+     * Return the layout panel
+     */
+    getMessageLayoutPanel() {
+        return this.page.getByTestId("layoutPanel");
+    }
+
+    /**
+     * Return the layout radio button
+     * @param layoutName
+     * @private
+     */
+    private getLayout(layoutName: string) {
+        return this.getMessageLayoutPanel().getByRole("radio", { name: layoutName });
+    }
+
+    /**
+     * Return the message bubbles layout radio button
+     */
+    getBubbleLayout() {
+        return this.getLayout("Message bubbles");
+    }
+
+    /**
+     * Return the modern layout radio button
+     */
+    getModernLayout() {
+        return this.getLayout("Modern");
+    }
+
+    /**
+     * Return the IRC layout radio button
+     */
+    getIRCLayout() {
+        return this.getLayout("IRC (experimental)");
+    }
+
+    /**
+     * Return the compact layout checkbox
+     */
+    getCompactLayoutCheckbox() {
+        return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" });
+    }
+
+    /**
+     * Assert the compact layout is enabled
+     */
+    assertCompactLayout() {
+        return expect(
+            this.page.locator("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout"),
+        ).toBeVisible();
+    }
 }