Move the active tab in user settings to the dialog title (#12481)

* Convert tabbedview to functional component

The 'Tab' is still a class, so now it's a functional component that
has a supporting class, which is maybe a bit... jarring, but I think
is actually perfectly logical.

* put comment back

* Fix bad tab ID behaviour

* Make TabbedView a controlled component

This does mean the logic of keeping what tab is active is now in each
container component, but for a functional component, this is a single
line. It makes TabbedView simpler and the container components always
know exactly what tab is being displayed rather than having to effectively
keep the state separately themselves if they wanted it.

Based on https://github.com/matrix-org/matrix-react-sdk/pull/12478

* Move the active tab in user settings to the dialog title

Separated by a colon, as per the new design.

* Update snapshots

* Update a playwright test

* Fix more tests / snapshots

* Attempt to test all the cases of titleForTabID

* More tests

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}