New user profile UI in User Settings

package.json

@@ -77,7 +77,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^4.3.1",
+        "@vector-im/compound-web": "^4.4.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

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

@@ -21,8 +21,6 @@ const USER_NAME_NEW = "Alice";
 const IntegrationManager = "scalar.vector.im";
 
 test.describe("General user settings tab", () => {
-    let userId: string;
-
     test.use({
         displayName: USER_NAME,
         config: {
@@ -34,18 +32,18 @@ test.describe("General user settings tab", () => {
         },
     });
 
-    test("should be rendered properly", async ({ uut }) => {
+    test("should be rendered properly", async ({ uut, user }) => {
         await expect(uut).toMatchScreenshot("general.png");
 
         // Assert that the top heading is rendered
         await expect(uut.getByRole("heading", { name: "General" })).toBeVisible();
 
-        const profile = uut.locator(".mx_ProfileSettings_profile");
+        const profile = uut.locator(".mx_UserProfileSettings_profile");
         await profile.scrollIntoViewIfNeeded();
         await expect(profile.getByRole("textbox", { name: "Display Name" })).toHaveValue(USER_NAME);
 
         // Assert that a userId is rendered
-        await expect(profile.locator(".mx_ProfileSettings_profile_controls_userId", { hasText: userId })).toBeVisible();
+        expect(uut.getByLabel("Username")).toHaveText(user.userId);
 
         // Check avatar setting
         const avatar = profile.locator(".mx_AvatarSetting_avatar");
@@ -131,12 +129,15 @@ test.describe("General user settings tab", () => {
     });
 
     test("should support adding and removing a profile picture", async ({ uut }) => {
-        const profileSettings = uut.locator(".mx_ProfileSettings");
+        const profileSettings = uut.locator(".mx_UserProfileSettings");
         // Upload a picture
         await profileSettings.getByAltText("Upload").setInputFiles("playwright/sample-files/riot.png");
 
         // Find and click "Remove" link button
-        await profileSettings.locator(".mx_ProfileSettings_profile").getByRole("button", { name: "Remove" }).click();
+        await profileSettings
+            .locator(".mx_UserProfileSettings_profile")
+            .getByRole("button", { name: "Remove" })
+            .click();
 
         // Assert that the link button disappeared
         await expect(
@@ -175,7 +176,7 @@ test.describe("General user settings tab", () => {
     test("should support changing a display name", async ({ uut, page, app }) => {
         // Change the diaplay name to USER_NAME_NEW
         const displayNameInput = uut
-            .locator(".mx_SettingsTab .mx_ProfileSettings")
+            .locator(".mx_SettingsTab .mx_UserProfileSettings")
             .getByRole("textbox", { name: "Display Name" });
         await displayNameInput.fill(USER_NAME_NEW);
         await displayNameInput.press("Enter");

res/css/_common.pcss

@@ -597,7 +597,10 @@ legend {
  * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
  * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
  */
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton),
+.mx_Dialog
+    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
+        .mx_ProfileSettings button
+    ),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {

res/css/_components.pcss

@@ -337,14 +337,15 @@
 @import "./views/settings/_Notifications.pcss";
 @import "./views/settings/_PhoneNumbers.pcss";
 @import "./views/settings/_PowerLevelSelector.pcss";
-@import "./views/settings/_ProfileSettings.pcss";
+@import "./views/settings/_RoomProfileSettings.pcss";
 @import "./views/settings/_SecureBackupPanel.pcss";
 @import "./views/settings/_SetIdServer.pcss";
 @import "./views/settings/_SetIntegrationManager.pcss";
 @import "./views/settings/_SettingsFieldset.pcss";
 @import "./views/settings/_SpellCheckLanguages.pcss";
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.pcss";
+@import "./views/settings/_UserProfileSettings.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";

res/css/views/dialogs/_UserSettingsDialog.pcss

@@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_SettingsDialog_toastContainer {
+    position: absolute;
+    bottom: var(--cpd-space-10x);
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
 /* ICONS */
 /* ========================================================== */
 

res/css/views/settings/_ProfileSettings.pcss → res/css/views/settings/_RoomProfileSettings.pcss

@@ -14,40 +14,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ProfileSettings {
+.mx_RoomProfileSettings {
     border-bottom: 1px solid $quinary-content;
 
-    .mx_ProfileSettings_profile {
+    .mx_RoomProfileSettings_profile {
         display: flex;
 
-        .mx_ProfileSettings_profile_controls {
+        .mx_RoomProfileSettings_profile_controls {
             flex-grow: 1;
             margin-inline-end: 54px;
 
             .mx_Field {
                 margin-top: $spacing-8;
             }
 
-            .mx_ProfileSettings_profile_controls_topic {
+            .mx_RoomProfileSettings_profile_controls_topic {
                 margin-top: $spacing-8;
 
                 & > textarea {
                     font-family: inherit;
                     resize: vertical;
                 }
 
-                &.mx_ProfileSettings_profile_controls_topic--room textarea {
+                &.mx_RoomProfileSettings_profile_controls_topic--room textarea {
                     min-height: 4em;
                 }
             }
 
-            .mx_ProfileSettings_profile_controls_userId {
+            .mx_RoomProfileSettings_profile_controls_userId {
                 margin-inline-end: $spacing-20;
             }
         }
     }
 
-    .mx_ProfileSettings_buttons {
+    .mx_RoomProfileSettings_buttons {
         display: flex;
         gap: var(--cpd-space-4x);
         margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */

res/css/views/settings/_UserProfileSettings.pcss

@@ -0,0 +1,58 @@
+/*
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserProfileSettings {
+    border-bottom: 1px solid $quinary-content;
+
+    .mx_UserProfileSettings_profile {
+        display: flex;
+        margin-top: var(--cpd-space-6x);
+        gap: 16px;
+        /* This is temporary until the 'Remove' link is replaced by a context menu. */
+        margin-bottom: 20px;
+
+        .mx_UserProfileSettings_profile_displayName {
+            flex-grow: 1;
+            width: 100%;
+        }
+    }
+
+    .mx_UserProfileSettings_profile_controls {
+        flex-grow: 1;
+    }
+
+    .mx_UserProfileSettings_profile_controls_userId {
+        width: 100%;
+        .mx_CopyableText {
+            margin-top: var(--cpd-space-1x);
+            width: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+    .mx_UserProfileSettings_profile_controls_userId_label {
+        font-size: 15px;
+        font-weight: 500;
+    }
+}
+
+@media (max-width: 768px) {
+    .mx_UserProfileSettings_profile {
+        flex-direction: column;
+        align-items: center;
+        gap: 30px;
+    }
+}

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from "react";
+import { Toast } from "@vector-im/compound-web";
 
 import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
 import { _t, _td } from "../../../languageHandler";
@@ -38,6 +39,7 @@ import { UserTab } from "./UserTab";
 import { NonEmptyArray } from "../../../@types/common";
 import { SDKContext, SdkContextClass } from "../../../contexts/SDKContext";
 import { useSettingValue } from "../../../hooks/useSettings";
+import { ToastContext, useActiveToast } from "../../../contexts/ToastContext";
 
 interface IProps {
     initialTabId?: UserTab;
@@ -207,27 +209,34 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
 
     const [activeTabId, setActiveTabId] = useActiveTabWithDefault(getTabs(), UserTab.General, props.initialTabId);
 
+    const [activeToast, toastRack] = useActiveToast();
+
     return (
         // XXX: SDKContext is provided within the LoggedInView subtree.
         // Modals function outside the MatrixChat React tree, so sdkContext is reprovided here to simulate that.
         // The longer term solution is to move our ModalManager into the React tree to inherit contexts properly.
         <SDKContext.Provider value={props.sdkContext}>
-            <BaseDialog
-                className="mx_UserSettingsDialog"
-                hasCancel={true}
-                onFinished={props.onFinished}
-                title={titleForTabID(activeTabId)}
-            >
-                <div className="mx_SettingsDialog_content">
-                    <TabbedView
-                        tabs={getTabs()}
-                        activeTabId={activeTabId}
-                        screenName="UserSettings"
-                        onChange={setActiveTabId}
-                        responsive={true}
-                    />
-                </div>
-            </BaseDialog>
+            <ToastContext.Provider value={toastRack}>
+                <BaseDialog
+                    className="mx_UserSettingsDialog"
+                    hasCancel={true}
+                    onFinished={props.onFinished}
+                    title={titleForTabID(activeTabId)}
+                >
+                    <div className="mx_SettingsDialog_content">
+                        <TabbedView
+                            tabs={getTabs()}
+                            activeTabId={activeTabId}
+                            screenName="UserSettings"
+                            onChange={setActiveTabId}
+                            responsive={true}
+                        />
+                    </div>
+                    <div className="mx_SettingsDialog_toastContainer">
+                        {activeToast && <Toast>{activeToast}</Toast>}
+                    </div>
+                </BaseDialog>
+            </ToastContext.Provider>
         </SDKContext.Provider>
     );
 }

src/components/views/elements/CopyableText.tsx

@@ -22,14 +22,14 @@ import { _t } from "../../../languageHandler";
 import { copyPlaintext } from "../../../utils/strings";
 import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
 
-interface IProps {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     getTextToCopy: () => string | null;
     border?: boolean;
     className?: string;
 }
 
-const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true, className }) => {
+const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true, className, ...props }) => {
     const [tooltip, setTooltip] = useState<string | undefined>(undefined);
 
     const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
@@ -50,7 +50,7 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
     });
 
     return (
-        <div className={combinedClassName}>
+        <div className={combinedClassName} {...props}>
             {children}
             <AccessibleButton
                 title={tooltip ?? _t("action|copy")}

src/components/views/room_settings/RoomProfileSettings.tsx

@@ -202,7 +202,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
         let profileSettingsButtons;
         if (this.state.canSetName || this.state.canSetTopic || this.state.canSetAvatar) {
             profileSettingsButtons = (
-                <div className="mx_ProfileSettings_buttons">
+                <div className="mx_RoomProfileSettings_buttons">
                     <AccessibleButton
                         onClick={this.cancelProfileChanges}
                         kind="primary_outline"
@@ -218,9 +218,9 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
         }
 
         return (
-            <form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_ProfileSettings">
-                <div className="mx_ProfileSettings_profile">
-                    <div className="mx_ProfileSettings_profile_controls">
+            <form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_RoomProfileSettings">
+                <div className="mx_RoomProfileSettings_profile">
+                    <div className="mx_RoomProfileSettings_profile_controls">
                         <Field
                             label={_t("room_settings|general|name_field_label")}
                             type="text"
@@ -231,8 +231,8 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
                         />
                         <Field
                             className={classNames(
-                                "mx_ProfileSettings_profile_controls_topic",
-                                "mx_ProfileSettings_profile_controls_topic--room",
+                                "mx_RoomProfileSettings_profile_controls_topic",
+                                "mx_RoomProfileSettings_profile_controls_topic--room",
                             )}
                             id="profileTopic" // See: NewRoomIntro.tsx
                             label={_t("room_settings|general|topic_field_label")}

src/components/views/settings/AvatarSetting.tsx

@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
+import React, { createRef, useCallback, useEffect, useState } from "react";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
+import { useId } from "../../../utils/useId";
 
 interface IProps {
     /**
@@ -75,9 +76,8 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
         }
     }, [avatar]);
 
-    // TODO: Use useId() as soon as we're using React 18.
     // Prevents ID collisions when this component is used more than once on the same page.
-    const a11yId = useRef(`hover-text-${Math.random()}`);
+    const a11yId = useId();
 
     const onFileChanged = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -95,7 +95,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
             element="div"
             onClick={uploadAvatar}
             className="mx_AvatarSetting_avatarPlaceholder mx_AvatarSetting_avatarDisplay"
-            aria-labelledby={disabled ? undefined : a11yId.current}
+            aria-labelledby={disabled ? undefined : a11yId}
             // Inhibit tab stop as we have explicit upload/remove buttons
             tabIndex={-1}
         />
@@ -122,7 +122,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
                 <AccessibleButton
                     onClick={uploadAvatar}
                     className="mx_AvatarSetting_uploadButton"
-                    aria-labelledby={a11yId.current}
+                    aria-labelledby={a11yId}
                 />
                 <input
                     type="file"
@@ -151,7 +151,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
             {avatarElement}
             <div className="mx_AvatarSetting_hover" aria-hidden="true">
                 <div className="mx_AvatarSetting_hoverBg" />
-                {!disabled && <span id={a11yId.current}>{_t("action|upload")}</span>}
+                {!disabled && <span id={a11yId}>{_t("action|upload")}</span>}
             </div>
             {uploadAvatarBtn}
             {removeAvatarBtn}