Move the active tab in user settings to the dialog title

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

@@ -25,8 +25,6 @@ test.describe("Appearance user settings tab", () => {
     test("should be rendered properly", async ({ page, user, app }) => {
         const tab = await app.settings.openUserSettings("Appearance");
 
-        await expect(tab.getByRole("heading", { name: "Customise your appearance" })).toBeVisible();
-
         // Click "Show advanced" link button
         await tab.getByRole("button", { name: "Show advanced" }).click();
 

src/components/views/dialogs/BaseDialog.tsx

@@ -53,7 +53,7 @@ interface IProps {
     "top"?: React.ReactNode;
 
     // Title for the dialog.
-    "title"?: JSX.Element | string;
+    "title"?: React.ReactNode;
     // Specific aria label to use, if not provided will set aria-labelledBy to mx_Dialog_title
     "aria-label"?: string;
 

src/components/views/dialogs/InviteDialog.tsx

@@ -1536,7 +1536,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             );
             dialogContent = (
                 <React.Fragment>
-                    <TabbedView
+                    <TabbedView<TabId>
                         tabs={tabs}
                         activeTabId={this.state.currentTabId}
                         tabLocation={TabLocation.TOP}

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -45,6 +45,38 @@ interface IProps {
     onFinished(): void;
 }
 
+function titleForTabID(tabId: UserTab): React.ReactNode {
+    const subs = {
+        strong: (sub: string) => <strong>{sub}</strong>,
+    };
+    switch (tabId) {
+        case UserTab.General:
+            return _t("settings|general|dialog_title", undefined, subs);
+        case UserTab.SessionManager:
+            return _t("settings|sessions|dialog_title", undefined, subs);
+        case UserTab.Appearance:
+            return _t("settings|appearance|dialog_title", undefined, subs);
+        case UserTab.Notifications:
+            return _t("settings|notifications|dialog_title", undefined, subs);
+        case UserTab.Preferences:
+            return _t("settings|preferences|dialog_title", undefined, subs);
+        case UserTab.Keyboard:
+            return _t("settings|keyboard|dialog_title", undefined, subs);
+        case UserTab.Sidebar:
+            return _t("settings|sidebar|dialog_title", undefined, subs);
+        case UserTab.Voice:
+            return _t("settings|voip|dialog_title", undefined, subs);
+        case UserTab.Security:
+            return _t("settings|security|dialog_title", undefined, subs);
+        case UserTab.Labs:
+            return _t("settings|labs|dialog_title", undefined, subs);
+        case UserTab.Mjolnir:
+            return _t("settings|labs_mjolnir|dialog_title", undefined, subs);
+        case UserTab.Help:
+            return _t("setting|help_about|dialog_title", undefined, subs);
+    }
+}
+
 export default function UserSettingsDialog(props: IProps): JSX.Element {
     const voipEnabled = useSettingValue<boolean>(UIFeature.Voip);
     const mjolnirEnabled = useSettingValue<boolean>("feature_mjolnir");
@@ -184,7 +216,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
                 className="mx_UserSettingsDialog"
                 hasCancel={true}
                 onFinished={props.onFinished}
-                title={_t("common|settings")}
+                title={titleForTabID(activeTabId)}
             >
                 <div className="mx_SettingsDialog_content">
                     <TabbedView

src/components/views/settings/notifications/NotificationSettings2.tsx

@@ -123,7 +123,7 @@ export default function NotificationSettings2(): JSX.Element {
                     )}
                 </SettingsBanner>
             )}
-            <SettingsSection heading={_t("notifications|enable_prompt_toast_title")}>
+            <SettingsSection>
                 <div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
                     <LabelledToggleSwitch
                         label={_t("settings|notifications|enable_notifications_account")}

src/components/views/settings/shared/SettingsSection.tsx

@@ -20,10 +20,25 @@ import React, { HTMLAttributes } from "react";
 import Heading from "../../typography/Heading";
 
 export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
-    heading: string | React.ReactNode;
+    heading?: string | React.ReactNode;
     children?: React.ReactNode;
 }
 
+function renderHeading(heading: string | React.ReactNode | undefined): React.ReactNode | undefined {
+    switch (typeof heading) {
+        case "string":
+            return (
+                <Heading as="h2" size="3">
+                    {heading}
+                </Heading>
+            );
+        case "undefined":
+            return undefined;
+        default:
+            return heading;
+    }
+}
+
 /**
  * A section of settings content
  * A SettingsTab may contain one or more SettingsSections
@@ -43,13 +58,7 @@ export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const SettingsSection: React.FC<SettingsSectionProps> = ({ className, heading, children, ...rest }) => (
     <div {...rest} className={classnames("mx_SettingsSection", className)}>
-        {typeof heading === "string" ? (
-            <Heading as="h2" size="3">
-                {heading}
-            </Heading>
-        ) : (
-            <>{heading}</>
-        )}
+        {renderHeading(heading)}
         <div className="mx_SettingsSection_subSections">{children}</div>
     </div>
 );

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -32,7 +32,7 @@ import ThemeChoicePanel from "../../ThemeChoicePanel";
 import ImageSizePanel from "../../ImageSizePanel";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
-import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
+import SettingsSubsection from "../../shared/SettingsSubsection";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
 
 interface IProps {}
@@ -152,12 +152,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
     }
 
     public render(): React.ReactNode {
-        const brand = SdkConfig.get().brand;
-
         return (
             <SettingsTab data-testid="mx_AppearanceUserSettingsTab">
-                <SettingsSection heading={_t("settings|appearance|heading")}>
-                    <SettingsSubsectionText>{_t("settings|appearance|subheading", { brand })}</SettingsSubsectionText>
+                <SettingsSection>
                     <ThemeChoicePanel />
                     <LayoutSwitcher
                         userId={this.state.userId}

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -560,7 +560,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
         return (
             <SettingsTab data-testid="mx_GeneralUserSettingsTab">
-                <SettingsSection heading={_t("common|general")}>
+                <SettingsSection>
                     <ProfileSettings />
                     {this.renderAccountSection()}
                     {this.renderLanguageSection()}

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -264,7 +264,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
 
         return (
             <SettingsTab>
-                <SettingsSection heading={_t("setting|help_about|title")}>
+                <SettingsSection>
                     {bugReportingSection}
                     <SettingsSubsection heading={_t("common|faq")} description={faqText} />
                     <SettingsSubsection heading={_t("setting|help_about|versions")}>

src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx

@@ -73,7 +73,7 @@ const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ cate
 const KeyboardUserSettingsTab: React.FC = () => {
     return (
         <SettingsTab>
-            <SettingsSection heading={_t("settings|keyboard|title")}>
+            <SettingsSection>
                 {visibleCategories.map(([categoryName, category]) => {
                     return (
                         <KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />

src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx

@@ -254,7 +254,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
 
         return (
             <SettingsTab>
-                <SettingsSection heading={_t("labs_mjolnir|title")}>
+                <SettingsSection>
                     <SettingsSubsectionText>
                         <strong className="warning">{_t("labs_mjolnir|advanced_warning")}</strong>
                         <p>{_t("labs_mjolnir|explainer_1", { brand }, { code: (s) => <code>{s}</code> })}</p>

src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 
-import { _t } from "../../../../../languageHandler";
 import { Features } from "../../../../../settings/Settings";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import Notifications from "../../Notifications";
@@ -33,7 +32,7 @@ export default class NotificationUserSettingsTab extends React.Component {
                 {newNotificationSettingsEnabled ? (
                     <NotificationSettings2 />
                 ) : (
-                    <SettingsSection heading={_t("notifications|enable_prompt_toast_title")}>
+                    <SettingsSection>
                         <Notifications />
                     </SettingsSection>
                 )}

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -145,7 +145,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
 
         return (
             <SettingsTab data-testid="mx_PreferencesUserSettingsTab">
-                <SettingsSection heading={_t("common|preferences")}>
+                <SettingsSection>
                     {roomListSettings.length > 0 && (
                         <SettingsSubsection heading={_t("settings|preferences|room_list_heading")}>
                             {this.renderGroup(roomListSettings)}

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -284,7 +284,7 @@ const SessionManagerTab: React.FC = () => {
 
     return (
         <SettingsTab>
-            <SettingsSection heading={_t("settings|sessions|title")}>
+            <SettingsSection>
                 <LoginWithQRSection
                     onShowQr={onShowQrClicked}
                     versions={clientVersions}

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -80,7 +80,7 @@ const SidebarUserSettingsTab: React.FC = () => {
 
     return (
         <SettingsTab>
-            <SettingsSection heading={_t("settings|sidebar|title")}>
+            <SettingsSection>
                 <SettingsSubsection
                     heading={_t("settings|sidebar|metaspaces_subsection")}
                     description={_t("settings|sidebar|spaces_explainer")}

src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx

@@ -180,7 +180,7 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
 
         return (
             <SettingsTab>
-                <SettingsSection heading={_t("settings|voip|title")}>
+                <SettingsSection>
                     {requestButton}
                     <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
                         {speakerDropdown}

src/i18n/strings/en_EN.json

@@ -2395,6 +2395,7 @@
             "brand_version": "%(brand)s version:",
             "clear_cache_reload": "Clear cache and reload",
             "crypto_version": "Crypto version:",
+            "dialog_title": "<strong>Settings:</strong> Help & About",
             "help_link": "For help with using %(brand)s, click <a>here</a>.",
             "homeserver": "Homeserver is <code>%(homeserverUrl)s</code>",
             "identity_server": "Identity server is <code>%(identityServerUrl)s</code>",
@@ -2417,15 +2418,14 @@
             "custom_theme_invalid": "Invalid theme schema.",
             "custom_theme_success": "Theme added!",
             "custom_theme_url": "Custom theme URL",
+            "dialog_title": "<strong>Settings:</strong> Appearance",
             "font_size": "Font size",
             "font_size_default": "%(fontSize)s (default)",
-            "heading": "Customise your appearance",
             "image_size_default": "Default",
             "image_size_large": "Large",
             "layout_bubbles": "Message bubbles",
             "layout_irc": "IRC (Experimental)",
             "match_system_theme": "Match system theme",
-            "subheading": "Appearance Settings only affect this %(brand)s session.",
             "timeline_image_size": "Image size in the timeline",
             "use_high_contrast": "Use high contrast"
         },
@@ -2467,6 +2467,7 @@
             "deactivate_confirm_erase_label": "Hide my messages from new joiners",
             "deactivate_section": "Deactivate Account",
             "deactivate_warning": "Deactivating your account is a permanent action — be careful!",
+            "dialog_title": "<strong>Settings:</strong> General",
             "discovery_email_empty": "Discovery options will appear once you have added an email above.",
             "discovery_email_verification_instructions": "Verify the link in your inbox",
             "discovery_msisdn_empty": "Discovery options will appear once you have added a phone number above.",
@@ -2574,12 +2575,20 @@
             "phrase_strong_enough": "Great! This passphrase looks strong enough"
         },
         "keyboard": {
+            "dialog_title": "<strong>Settings:</strong> Keyboard",
             "title": "Keyboard"
         },
+        "labs": {
+            "dialog_title": "<strong>Settings:</strong> Labs"
+        },
+        "labs_mjolnir": {
+            "dialog_title": "<strong>Settings:</strong> Ignored Users"
+        },
         "notifications": {
             "default_setting_description": "This setting will be applied by default to all your rooms.",
             "default_setting_section": "I want to be notified for (Default Setting)",
             "desktop_notification_message_preview": "Show message preview in desktop notification",
+            "dialog_title": "<strong>Settings:</strong> Notifications",
             "email_description": "Receive an email summary of missed notifications",
             "email_section": "Email summary",
             "email_select": "Select which emails you want to send summaries to. Manage your emails in <button>General</button>.",
@@ -2638,6 +2647,7 @@
             "code_blocks_heading": "Code blocks",
             "compact_modern": "Use a more compact 'Modern' layout",
             "composer_heading": "Composer",
+            "dialog_title": "<strong>Settings:</strong> Preferences",
             "enable_hardware_acceleration": "Enable hardware acceleration",
             "enable_tray_icon": "Show tray icon and minimise window to it on close",
             "keyboard_heading": "Keyboard shortcuts",
@@ -2687,6 +2697,7 @@
             "dehydrated_device_enabled": "Offline device enabled",
             "delete_backup": "Delete Backup",
             "delete_backup_confirm_description": "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.",
+            "dialog_title": "<strong>Settings:</strong> Security & Privacy",
             "e2ee_default_disabled_warning": "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
             "enable_message_search": "Enable message search in encrypted rooms",
             "encryption_individual_verification_mode": "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.",
@@ -2766,6 +2777,7 @@
             "device_unverified_description_current": "Verify your current session for enhanced secure messaging.",
             "device_verified_description": "This session is ready for secure messaging.",
             "device_verified_description_current": "Your current session is ready for secure messaging.",
+            "dialog_title": "<strong>Settings:</strong> Sessions",
             "error_pusher_state": "Failed to set pusher state",
             "error_set_name": "Failed to set session name",
             "filter_all": "All",
@@ -2849,6 +2861,7 @@
         "show_typing_notifications": "Show typing notifications",
         "showbold": "Show all activity in the room list (dots or number of unread messages)",
         "sidebar": {
+            "dialog_title": "<strong>Settings:</strong> Sidebar",
             "metaspaces_favourites_description": "Group all your favourite rooms and people in one place.",
             "metaspaces_home_all_rooms": "Show all rooms",
             "metaspaces_home_all_rooms_description": "Show all your rooms in Home, even if they're in a space.",
@@ -2878,6 +2891,7 @@
             "audio_output_empty": "No Audio Outputs detected",
             "auto_gain_control": "Automatic gain control",
             "connection_section": "Connection",
+            "dialog_title": "<strong>Settings:</strong> Voice & Video",
             "echo_cancellation": "Echo cancellation",
             "enable_fallback_ice_server": "Allow fallback call assist server (%(server)s)",
             "enable_fallback_ice_server_description": "Only applies if your homeserver does not offer one. Your IP address would be shared during a call.",