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}