MM-63313 Make theme setting radio buttons horizontal and update text (#30584)

* MM-63313 Make theme setting radio buttons horizontal and update text

* MM-63313 Add Playwright test for a11y of theme settings

* Update snapshot

* Run prettier on E2E tests

* Address feedback

* Ensure new test reliably passes on Firefox

For whatever reason, Firefox lets you tab onto the Sidebar Styles panel
while it's expanding, possibly because it's a scrollable container with
overflowing content or because other browsers don't register the
children of that panel as visible while the panel is animating open.
Either way, we can look at the CSS on the panel to confirm when the
transition is done.

* Revert previous changes made to premade theme label alignment and size

In the last PR, these were changed from generic divs to buttons, and the
default browser style for buttons adds some extra padding and centres
the button text by default, so we have to override that.

* Adjust margins on inline radio group

* Fix playwright test code styling

* Fix bad import in E2E tests

e2e-tests/playwright/lib/src/ui/components/channels/settings/display_settings.ts

@@ -0,0 +1,58 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export type DisplaySettingsSection =
+    | 'theme'
+    | 'collapsedReplyThreads'
+    | 'clockDisplay'
+    | 'teammateNameDisplay'
+    | 'availabilityStatusOnPosts'
+    | 'lastActiveTime'
+    | 'timezone'
+    | 'showLinkPreviews'
+    | 'collapseImagePreviews'
+    | 'clickToReply'
+    | 'channelDisplayMode'
+    | 'oneClickReactions'
+    | 'language';
+
+const sectionTitles: Record<DisplaySettingsSection, string> = {
+    theme: 'Theme',
+    collapsedReplyThreads: 'Threaded Discussions',
+    clockDisplay: 'Clock Display',
+    teammateNameDisplay: 'Teammate Name Display',
+    availabilityStatusOnPosts: 'Show online availability on profile images',
+    lastActiveTime: 'Share last active time',
+    timezone: 'Timezone',
+    showLinkPreviews: 'Website Link Previews',
+    collapseImagePreviews: 'Default Appearance of Image Previews',
+    clickToReply: 'Click to open threads',
+    channelDisplayMode: 'Channel Display',
+    oneClickReactions: 'Quick reactions on messages',
+    language: 'Language',
+};
+
+export default class DisplaySettings {
+    readonly container: Locator;
+
+    constructor(container: Locator) {
+        this.container = container;
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+
+    async expandSection(section: DisplaySettingsSection) {
+        await this.container.getByText(sectionTitles[section]).click();
+        await this.verifySectionIsExpanded(section);
+    }
+
+    async verifySectionIsExpanded(section: DisplaySettingsSection) {
+        await expect(this.container.locator('.section-min', {hasText: sectionTitles[section]})).not.toBeVisible();
+
+        await expect(this.container.locator('.section-max', {hasText: sectionTitles[section]})).toBeVisible();
+    }
+}

e2e-tests/playwright/lib/src/ui/components/channels/settings/settings_modal.ts

@@ -3,6 +3,7 @@
 
 import {Locator, expect} from '@playwright/test';
 
+import DisplaySettings from './display_settings';
 import NotificationsSettings from './notification_settings';
 
 export default class SettingsModal {
@@ -11,11 +12,17 @@ export default class SettingsModal {
     readonly notificationsSettingsTab;
     readonly notificationsSettings;
 
+    readonly displaySettingsTab;
+    readonly displaySettings;
+
     constructor(container: Locator) {
         this.container = container;
 
         this.notificationsSettingsTab = container.locator('#notificationsButton');
         this.notificationsSettings = new NotificationsSettings(container.locator('#notificationsSettings'));
+
+        this.displaySettingsTab = container.locator('#displayButton');
+        this.displaySettings = new DisplaySettings(container.locator('#displaySettings'));
     }
 
     async toBeVisible() {
@@ -27,6 +34,17 @@ export default class SettingsModal {
         await this.notificationsSettingsTab.click();
 
         await this.notificationsSettings.toBeVisible();
+
+        return this.notificationsSettings;
+    }
+
+    async openDisplayTab() {
+        await expect(this.displaySettingsTab).toBeVisible();
+        await this.displaySettingsTab.click();
+
+        await this.displaySettings.toBeVisible();
+
+        return this.displaySettings;
     }
 
     async closeModal() {

e2e-tests/playwright/lib/src/ui/components/global_header.ts

@@ -3,7 +3,10 @@
 
 import {Locator, expect} from '@playwright/test';
 
+import {ChannelsPage} from '../pages';
+
 export default class GlobalHeader {
+    readonly channelsPage: ChannelsPage;
     readonly container: Locator;
 
     readonly accountMenuButton;
@@ -12,7 +15,8 @@ export default class GlobalHeader {
     readonly settingsButton;
     readonly searchBox;
 
-    constructor(container: Locator) {
+    constructor(channelsPage: ChannelsPage, container: Locator) {
+        this.channelsPage = channelsPage;
         this.container = container;
 
         this.accountMenuButton = container.getByRole('button', {name: "'s account menu"});
@@ -34,6 +38,10 @@ export default class GlobalHeader {
     async openSettings() {
         await expect(this.settingsButton).toBeVisible();
         await this.settingsButton.click();
+
+        await this.channelsPage.settingsModal.toBeVisible();
+
+        return this.channelsPage.settingsModal;
     }
 
     async openRecentMentions() {

e2e-tests/playwright/lib/src/ui/pages/channels.ts

@@ -36,7 +36,7 @@ export default class ChannelsPage {
         this.page = page;
 
         // The main areas of the app
-        this.globalHeader = new components.GlobalHeader(page.locator('#global-header'));
+        this.globalHeader = new components.GlobalHeader(this, page.locator('#global-header'));
         this.searchPopover = new components.SearchPopover(page.locator('#searchPopover'));
         this.centerView = new components.ChannelsCenterView(page.getByTestId('channel_view'));
         this.sidebarLeft = new components.ChannelsSidebarLeft(page.locator('#SidebarContainer'));