Format mxids when disambiguation needed

res/css/views/messages/_SenderProfile.scss

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SenderProfile_name {
+.mx_SenderProfile_displayName {
     font-weight: 600;
 }
 
+.mx_SenderProfile_mxid {
+    font-weight: 600;
+    font-size: 1.1rem;
+    margin-left: 5px;
+    opacity: 0.5; // Match mx_TextualEvent
+}

src/components/views/messages/SenderProfile.js → src/components/views/messages/SenderProfile.tsx

@@ -15,31 +15,39 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import Flair from '../elements/Flair.js';
 import FlairStore from '../../../stores/FlairStore';
 import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import MatrixEvent from "matrix-js-sdk/src/models/event";
 
-@replaceableComponent("views.messages.SenderProfile")
-export default class SenderProfile extends React.Component {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired, // event whose sender we're showing
-        onClick: PropTypes.func,
-    };
+interface IProps {
+    mxEvent: MatrixEvent;
+    onClick(): void;
+    enableFlair: boolean;
+}
 
+interface IState {
+    userGroups;
+    relatedGroups;
+}
+
+@replaceableComponent("views.messages.SenderProfile")
+export default class SenderProfile extends React.Component<IProps, IState> {
     static contextType = MatrixClientContext;
+    private unmounted: boolean;
 
-    constructor(props) {
-        super(props);
+    constructor(props: IProps) {
+        super(props)
         const senderId = this.props.mxEvent.getSender();
 
         this.state = {
             userGroups: FlairStore.cachedPublicisedGroups(senderId) || [],
             relatedGroups: [],
         };
     }
+
     componentDidMount() {
         this.unmounted = false;
         this._updateRelatedGroups();
@@ -100,14 +108,26 @@ export default class SenderProfile extends React.Component {
     render() {
         const {mxEvent} = this.props;
         const colorClass = getUserNameColorClass(mxEvent.getSender());
-        const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         const {msgtype} = mxEvent.getContent();
 
+        const disambiguate = mxEvent.sender?.disambiguate;
+        const displayName = mxEvent.sender?.rawDisplayName || mxEvent.getSender() || "";
+        const mxid = mxEvent.sender?.userId || mxEvent.getSender() || "";
+
         if (msgtype === 'm.emote') {
             return null; // emote message must include the name so don't duplicate it
         }
 
-        let flair = null;
+        let mxidElement;
+        if (disambiguate) {
+            mxidElement = (
+                <span className="mx_SenderProfile_mxid">
+                    { mxid }
+                </span>
+            );
+        }
+
+        let flair;
         if (this.props.enableFlair) {
             const displayedGroups = this._getDisplayedGroups(
                 this.state.userGroups, this.state.relatedGroups,
@@ -119,13 +139,12 @@ export default class SenderProfile extends React.Component {
             />;
         }
 
-        const nameElem = name || '';
-
         return (
             <div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
-                <span className={`mx_SenderProfile_name ${colorClass}`}>
-                    { nameElem }
+                <span className={`mx_SenderProfile_displayName ${colorClass}`}>
+                    { displayName }
                 </span>
+                { mxidElement }
                 { flair }
             </div>
         );

test/end-to-end-tests/src/usecases/timeline.js

@@ -122,7 +122,7 @@ function getAllEventTiles(session) {
 }
 
 async function getMessageFromEventTile(eventTile) {
-    const senderElement = await eventTile.$(".mx_SenderProfile_name");
+    const senderElement = await eventTile.$(".mx_SenderProfile_displayName");
     const className = await (await eventTile.getProperty("className")).jsonValue();
     const classNames = className.split(" ");
     const bodyElement = await eventTile.$(".mx_EventTile_body");