Merge pull request #5624 from SimonBrandner/show-room-name

Display room name in pills instead of address

Author: jryans

src/components/views/elements/Pill.js

@@ -26,6 +26,7 @@ import FlairStore from "../../../stores/FlairStore";
 import {getPrimaryPermalinkEntity, parseAppLocalLink} from "../../../utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
+import Tooltip from './Tooltip';
 
 class Pill extends React.Component {
     static roomNotifPos(text) {
@@ -68,6 +69,8 @@ class Pill extends React.Component {
         group: null,
         // The room related to the room pill
         room: null,
+        // Is the user hovering the pill
+        hover: false,
     };
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
@@ -154,6 +157,18 @@ class Pill extends React.Component {
         this._unmounted = true;
     }
 
+    onMouseOver = () => {
+        this.setState({
+            hover: true,
+        });
+    };
+
+    onMouseLeave = () => {
+        this.setState({
+            hover: false,
+        });
+    };
+
     doProfileLookup(userId, member) {
         MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
             if (this._unmounted) {
@@ -226,7 +241,7 @@ class Pill extends React.Component {
             case Pill.TYPE_ROOM_MENTION: {
                 const room = this.state.room;
                 if (room) {
-                    linkText = resource;
+                    linkText = room.name || resource;
                     if (this.props.shouldShowPillAvatar) {
                         avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
                     }
@@ -256,15 +271,36 @@ class Pill extends React.Component {
         });
 
         if (this.state.pillType) {
+            const {yOffset} = this.props;
+
+            let tip;
+            if (this.state.hover && resource) {
+                tip = <Tooltip label={resource} yOffset={yOffset} />;
+            }
+
             return <MatrixClientContext.Provider value={this._matrixClient}>
                 { this.props.inMessage ?
-                    <a className={classes} href={href} onClick={onClick} title={resource} data-offset-key={this.props.offsetKey}>
+                    <a
+                        className={classes}
+                        href={href}
+                        onClick={onClick}
+                        data-offset-key={this.props.offsetKey}
+                        onMouseOver={this.onMouseOver}
+                        onMouseLeave={this.onMouseLeave}
+                    >
                         { avatar }
                         { linkText }
+                        { tip }
                     </a> :
-                    <span className={classes} title={resource} data-offset-key={this.props.offsetKey}>
+                    <span
+                        className={classes}
+                        data-offset-key={this.props.offsetKey}
+                        onMouseOver={this.onMouseOver}
+                        onMouseLeave={this.onMouseLeave}
+                    >
                         { avatar }
                         { linkText }
+                        { tip }
                     </span> }
             </MatrixClientContext.Provider>;
         } else {

src/editor/parts.ts

@@ -329,8 +329,8 @@ class NewlinePart extends BasePart implements IBasePart {
 }
 
 class RoomPillPart extends PillPart {
-    constructor(displayAlias, private room: Room) {
-        super(displayAlias, displayAlias);
+    constructor(resourceId: string, label: string, private room: Room) {
+        super(resourceId, label);
     }
 
     setAvatar(node: HTMLElement) {
@@ -357,6 +357,10 @@ class RoomPillPart extends PillPart {
 }
 
 class AtRoomPillPart extends RoomPillPart {
+    constructor(text: string, room: Room) {
+        super(text, text, room);
+    }
+
     get type(): IPillPart["type"] {
         return Type.AtRoomPill;
     }
@@ -521,7 +525,7 @@ export class PartCreator {
                        r.getAltAliases().includes(alias);
             });
         }
-        return new RoomPillPart(alias, room);
+        return new RoomPillPart(alias, room ? room.name : alias, room);
     }
 
     atRoomPill(text: string) {

test/components/views/messages/TextualBody-test.js

@@ -208,7 +208,7 @@ describe("<TextualBody />", () => {
             const content = wrapper.find(".mx_EventTile_body");
             expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
                 'Hey <span>' +
-                '<a class="mx_Pill mx_UserPill" title="@user:server">' +
+                '<a class="mx_Pill mx_UserPill">' +
                 '<img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" ' +
                 'style="width: 16px; height: 16px;" title="@member:domain.bla" alt="" aria-hidden="true">Member</a>' +
                 '</span></span>');
@@ -267,8 +267,8 @@ describe("<TextualBody />", () => {
             expect(content.html()).toBe(
                 '<span class="mx_EventTile_body markdown-body" dir="auto">' +
                 'A <span><a class="mx_Pill mx_RoomPill" href="#/room/!ZxbRYPQXDXKGmDnJNg:example.com' +
-                '?via=example.com&amp;via=bob.com" ' +
-                'title="!ZxbRYPQXDXKGmDnJNg:example.com"><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
+                '?via=example.com&amp;via=bob.com"' +
+                '><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
                 'src="mxc://avatar.url/room.png" ' +
                 'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' +
                 '!ZxbRYPQXDXKGmDnJNg:example.com</a></span> with vias</span>',