Rename general user settings to account (#12841)

* Rename general user settings to account

Everything 'general' is now elsewhere, so this is ready for its
new name.

* Update snapshots

* Rename & update playwright test

* Rename class & remove unused CSS class

* Change test ID

* rethemendex

* More tests!!

* snapshots

* Put the screenshots back in the new place

* Fix tests with restoreAllMocks

* More screenshot renaming

* More test fixes & screenshot updates

* More test fixes

* un-skip

* Typo

Co-authored-by: Robin <[email protected]>

---------

Co-authored-by: Robin <[email protected]>

Author: dbkr

playwright/e2e/oidc/oidc-aware.spec.ts

@@ -31,7 +31,7 @@ test.describe("OIDC Aware", () => {
         await expect(page.getByRole("heading", { name: "Welcome alice", exact: true })).toBeVisible();
 
         // Open settings and navigate to account management
-        await app.settings.openUserSettings("General");
+        await app.settings.openUserSettings("Account");
         const newPagePromise = context.waitForEvent("page");
         await page.getByRole("button", { name: "Manage account" }).click();
 

playwright/e2e/oidc/oidc-native.spec.ts

@@ -44,7 +44,7 @@ test.describe("OIDC Native", () => {
 
         const deviceId = await page.evaluate<string>(() => window.localStorage.mx_device_id);
 
-        await app.settings.openUserSettings("General");
+        await app.settings.openUserSettings("Account");
         const newPagePromise = context.waitForEvent("page");
         await page.getByRole("button", { name: "Manage account" }).click();
         await app.settings.closeDialog();

playwright/e2e/settings/general-user-settings-tab.spec.ts renamed to playwright/e2e/settings/account-user-settings-tab.spec.ts

@@ -19,23 +19,23 @@ import { test, expect } from "../../element-web-test";
 const USER_NAME = "Bob";
 const USER_NAME_NEW = "Alice";
 
-test.describe("General user settings tab", () => {
+test.describe("Account user settings tab", () => {
     test.use({
         displayName: USER_NAME,
         config: {
             default_country_code: "US", // For checking the international country calling code
         },
         uut: async ({ app, user }, use) => {
-            const locator = await app.settings.openUserSettings("General");
+            const locator = await app.settings.openUserSettings("Account");
             await use(locator);
         },
     });
 
     test("should be rendered properly", async ({ uut, user }) => {
-        await expect(uut).toMatchScreenshot("general.png");
+        await expect(uut).toMatchScreenshot("account.png");
 
         // Assert that the top heading is rendered
-        await expect(uut.getByRole("heading", { name: "General" })).toBeVisible();
+        await expect(uut.getByRole("heading", { name: "Account", exact: true })).toBeVisible();
 
         const profile = uut.locator(".mx_UserProfileSettings_profile");
         await profile.scrollIntoViewIfNeeded();
@@ -49,12 +49,11 @@ test.describe("General user settings tab", () => {
         await expect(uut.getByTestId("discoverySection").locator(".mx_Spinner")).not.toBeVisible();
 
         const accountSection = uut.getByTestId("accountSection");
+        accountSection.scrollIntoViewIfNeeded();
         // Assert that input areas for changing a password exists
-        const changePassword = accountSection.locator("form.mx_GeneralUserSettingsTab_section--account_changePassword");
-        await changePassword.scrollIntoViewIfNeeded();
-        await expect(changePassword.getByLabel("Current password")).toBeVisible();
-        await expect(changePassword.getByLabel("New Password")).toBeVisible();
-        await expect(changePassword.getByLabel("Confirm password")).toBeVisible();
+        await expect(accountSection.getByLabel("Current password")).toBeVisible();
+        await expect(accountSection.getByLabel("New Password")).toBeVisible();
+        await expect(accountSection.getByLabel("Confirm password")).toBeVisible();
 
         // Check email addresses area
         const emailAddresses = uut.getByTestId("mx_AccountEmailAddresses");
@@ -82,13 +81,13 @@ test.describe("General user settings tab", () => {
 
     test("should respond to small screen sizes", async ({ page, uut }) => {
         await page.setViewportSize({ width: 700, height: 600 });
-        await expect(uut).toMatchScreenshot("general-smallscreen.png");
+        await expect(uut).toMatchScreenshot("account-smallscreen.png");
     });
 
     test("should show tooltips on narrow screen", async ({ page, uut }) => {
         await page.setViewportSize({ width: 700, height: 600 });
-        await page.getByRole("tab", { name: "General" }).hover();
-        await expect(page.getByRole("tooltip")).toHaveText("General");
+        await page.getByRole("tab", { name: "Account" }).hover();
+        await expect(page.getByRole("tooltip")).toHaveText("Account");
     });
 
     test("should support adding and removing a profile picture", async ({ uut, page }) => {

playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png

@@ -32,7 +32,7 @@ import HelpIcon from "@vector-im/compound-design-tokens/assets/web/icons/help";
 
 import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
 import { _t, _td } from "../../../languageHandler";
-import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
+import AccountUserSettingsTab from "../settings/tabs/user/AccountUserSettingsTab";
 import SettingsStore from "../../../settings/SettingsStore";
 import LabsUserSettingsTab, { showLabsFlags } from "../settings/tabs/user/LabsUserSettingsTab";
 import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab";
@@ -65,8 +65,8 @@ function titleForTabID(tabId: UserTab): React.ReactNode {
         strong: (sub: string) => <span className="mx_UserSettingsDialog_title_strong">{sub}</span>,
     };
     switch (tabId) {
-        case UserTab.General:
-            return _t("settings|general|dialog_title", undefined, subs);
+        case UserTab.Account:
+            return _t("settings|account|dialog_title", undefined, subs);
         case UserTab.SessionManager:
             return _t("settings|sessions|dialog_title", undefined, subs);
         case UserTab.Appearance:
@@ -103,10 +103,10 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
 
         tabs.push(
             new Tab(
-                UserTab.General,
-                _td("common|general"),
+                UserTab.Account,
+                _td("settings|account|title"),
                 <UserProfileIcon />,
-                <GeneralUserSettingsTab closeSettingsFn={props.onFinished} />,
+                <AccountUserSettingsTab closeSettingsFn={props.onFinished} />,
                 "UserSettingsGeneral",
             ),
         );
@@ -216,7 +216,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
         return tabs as NonEmptyArray<Tab<UserTab>>;
     };
 
-    const [activeTabId, _setActiveTabId] = useActiveTabWithDefault(getTabs(), UserTab.General, props.initialTabId);
+    const [activeTabId, _setActiveTabId] = useActiveTabWithDefault(getTabs(), UserTab.Account, props.initialTabId);
     const setActiveTabId = (tabId: UserTab): void => {
         _setActiveTabId(tabId);
         // Clear this so switching away from the tab and back to it will not show the QR code again

playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 export enum UserTab {
-    General = "USER_GENERAL_TAB",
+    Account = "USER_ACCOUNT_TAB",
     Appearance = "USER_APPEARANCE_TAB",
     Notifications = "USER_NOTIFICATIONS_TAB",
     Preferences = "USER_PREFERENCES_TAB",

playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png

@@ -37,7 +37,7 @@ function generalTabButton(content: string): JSX.Element {
             onClick={() => {
                 dispatcher.dispatch({
                     action: Action.ViewUserSettings,
-                    initialTabId: UserTab.General,
+                    initialTabId: UserTab.Account,
                 });
             }}
         >

playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png

@@ -62,7 +62,6 @@ const AccountSection: React.FC<AccountSectionProps> = ({
             >
                 <SettingsSubsectionText>{_t("settings|general|password_change_section")}</SettingsSubsectionText>
                 <ChangePassword
-                    className="mx_GeneralUserSettingsTab_section--account_changePassword"
                     rowClassName=""
                     buttonKind="primary"
                     onError={onPasswordChangeError}
@@ -93,7 +92,7 @@ const ManagementSection: React.FC<ManagementSectionProps> = ({ onDeactivateClick
     );
 };
 
-const GeneralUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
+const AccountUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
     const [externalAccountManagementUrl, setExternalAccountManagementUrl] = React.useState<string | undefined>();
     const [canMake3pidChanges, setCanMake3pidChanges] = React.useState<boolean>(false);
     const [canSetDisplayName, setCanSetDisplayName] = React.useState<boolean>(false);
@@ -189,7 +188,7 @@ const GeneralUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
     }
 
     return (
-        <SettingsTab data-testid="mx_GeneralUserSettingsTab">
+        <SettingsTab data-testid="mx_AccountUserSettingsTab">
             <SettingsSection>
                 <UserProfileSettings
                     externalAccountManagementUrl={externalAccountManagementUrl}
@@ -208,4 +207,4 @@ const GeneralUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
     );
 };
 
-export default GeneralUserSettingsTab;
+export default AccountUserSettingsTab;

playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png

@@ -127,7 +127,7 @@ const tasks: UserOnboardingTask[] = [
                 PosthogTrackers.trackInteraction("WebUserOnboardingTaskSetupProfile", ev);
                 defaultDispatcher.dispatch({
                     action: Action.ViewUserSettings,
-                    initialTabId: UserTab.General,
+                    initialTabId: UserTab.Account,
                 });
             },
         },

playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png

@@ -2422,6 +2422,10 @@
         }
     },
     "settings": {
+        "account": {
+            "dialog_title": "<strong>Settings:</strong> Account",
+            "title": "Account"
+        },
         "all_rooms_home": "Show all rooms in Home",
         "all_rooms_home_description": "All rooms you're in will appear in Home.",
         "always_show_message_timestamps": "Always show message timestamps",
@@ -2497,7 +2501,6 @@
             "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.",
             "discovery_email_verification_instructions": "Verify the link in your inbox",
             "discovery_msisdn_empty": "Discovery options will appear once you have added a phone number.",

playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png

@@ -98,7 +98,7 @@ describe("<UserSettingsDialog />", () => {
     it("should render general settings tab when no initialTabId", () => {
         const { container } = render(getComponent());
 
-        expect(getActiveTabLabel(container)).toEqual("General");
+        expect(getActiveTabLabel(container)).toEqual("Account");
     });
 
     it("should render initial tab when initialTabId is set", () => {
@@ -111,7 +111,7 @@ describe("<UserSettingsDialog />", () => {
         // mjolnir tab is only rendered in some configs
         const { container } = render(getComponent({ initialTabId: UserTab.Mjolnir }));
 
-        expect(getActiveTabLabel(container)).toEqual("General");
+        expect(getActiveTabLabel(container)).toEqual("Account");
     });
 
     it("renders tabs correctly", () => {

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -3,10 +3,10 @@
 exports[`<UserSettingsDialog /> renders tabs correctly 1`] = `
 NodeList [
   <li
-    aria-controls="mx_tabpanel_USER_GENERAL_TAB"
+    aria-controls="mx_tabpanel_USER_ACCOUNT_TAB"
     aria-selected="true"
     class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
-    data-testid="settings-tab-USER_GENERAL_TAB"
+    data-testid="settings-tab-USER_ACCOUNT_TAB"
     role="tab"
     tabindex="0"
   >
@@ -29,9 +29,9 @@ NodeList [
     </svg>
     <span
       class="mx_TabbedView_tabLabel_text"
-      id="mx_tabpanel_USER_GENERAL_TAB_label"
+      id="mx_tabpanel_USER_ACCOUNT_TAB_label"
     >
-      General
+      Account
     </span>
   </li>,
   <li