fix(settings): default to first rendered tab when Account disabled

This commit is contained in:
2026-06-06 15:14:05 +02:00
parent f0c6c17e4a
commit 17a89cb12d
3 changed files with 25 additions and 15 deletions
@@ -267,8 +267,12 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
return tabs as NonEmptyArray<Tab<UserTab>>;
};
const defaultTab = moduleSettingsTabs.length > 0 ? (moduleSettingsTabs[0].key as UserTab) : UserTab.Account;
const [activeTabId, _setActiveTabId] = useActiveTabWithDefault(getTabs(), defaultTab, props.initialTabId);
const tabs = getTabs();
// Prefer the first module-registered tab (e.g. HealthChat "Profil"); otherwise fall back to the first
// tab that actually renders. The Account tab is disabled for HealthChat, so it cannot be the default —
// using it would leave no tab active and a blank panel when no module tab is present.
const defaultTab = moduleSettingsTabs.length > 0 ? (moduleSettingsTabs[0].key as UserTab) : tabs[0].id;
const [activeTabId, _setActiveTabId] = useActiveTabWithDefault(tabs, defaultTab, props.initialTabId);
const setActiveTabId = (tabId: UserTab): void => {
_setActiveTabId(tabId);
// Clear these so switching away from the tab and back to it will not show the QR code again
@@ -84,23 +84,25 @@ describe("<UserSettingsDialog />", () => {
const getActiveTabLabel = (container: Element) =>
container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent;
it("should render general settings tab when no initialTabId", () => {
it("should render the first tab when no initialTabId", () => {
// HealthChat disables the Account tab and (in unit tests) loads no module tab, so the first
// rendered tab (Sessions) is the default.
const { container } = render(getComponent());
expect(getActiveTabLabel(container)).toEqual("Account");
expect(getActiveTabLabel(container)).toEqual("Sessions");
});
it("should render initial tab when initialTabId is set", () => {
const { container } = render(getComponent({ initialTabId: UserTab.Help }));
const { container } = render(getComponent({ initialTabId: UserTab.Notifications }));
expect(getActiveTabLabel(container)).toEqual("Help & About");
expect(getActiveTabLabel(container)).toEqual("Notifications");
});
it("should render general tab if initialTabId tab cannot be rendered", () => {
// mjolnir tab is only rendered in some configs
it("should render the default tab if initialTabId tab cannot be rendered", () => {
// mjolnir tab is only rendered in some configs, so it falls back to the default (Sessions)
const { container } = render(getComponent({ initialTabId: UserTab.Mjolnir }));
expect(getActiveTabLabel(container)).toEqual("Account");
expect(getActiveTabLabel(container)).toEqual("Sessions");
});
it("renders tabs correctly", () => {
@@ -180,7 +182,8 @@ describe("<UserSettingsDialog />", () => {
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Security & Privacy");
});
it("renders with labs tab selected", () => {
// HealthChat disables the Labs tab "for now" (UserSettingsDialog.tsx). Restore when re-enabled.
it.skip("renders with labs tab selected", () => {
SdkConfig.add({
show_labs_settings: true,
});
@@ -197,14 +200,16 @@ describe("<UserSettingsDialog />", () => {
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Ignored Users");
});
it("renders with help tab selected", () => {
// HealthChat disables the Help tab "for now" (UserSettingsDialog.tsx). Restore when re-enabled.
it.skip("renders with help tab selected", () => {
const { container } = render(getComponent({ initialTabId: UserTab.Help }));
expect(getActiveTabLabel(container)).toEqual("Help & About");
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Settings: Help & About");
});
it("renders labs tab when show_labs_settings is enabled in config", () => {
// HealthChat disables the Labs tab "for now" (UserSettingsDialog.tsx). Restore when re-enabled.
it.skip("renders labs tab when show_labs_settings is enabled in config", () => {
SdkConfig.add({
show_labs_settings: true,
});
@@ -212,7 +217,8 @@ describe("<UserSettingsDialog />", () => {
expect(getByTestId(`settings-tab-${UserTab.Labs}`)).toBeTruthy();
});
it("renders labs tab when some feature is in beta", () => {
// HealthChat disables the Labs tab "for now" (UserSettingsDialog.tsx). Restore when re-enabled.
it.skip("renders labs tab when some feature is in beta", () => {
mockSettingsStore.getFeatureSettingNames.mockReturnValue([
"feature_beta_setting",
"feature_just_normal_labs",
@@ -4,8 +4,8 @@ exports[`<UserSettingsDialog /> renders tabs correctly 1`] = `
NodeList [
<li
aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
aria-selected="true"
class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
data-testid="settings-tab-USER_SESSION_MANAGER_TAB"
role="tab"
tabindex="0"