Merge pull request #4102 from matrix-org/bwindels/aliasautocomplete

Use alt_aliases for pills and autocomplete

src/Rooms.js

@@ -23,7 +23,7 @@ import {MatrixClientPeg} from './MatrixClientPeg';
  * of aliases. Otherwise return null;
  */
 export function getDisplayAliasForRoom(room) {
-    return room.getCanonicalAlias() || room.getAliases()[0];
+    return room.getCanonicalAlias() || room.getAltAliases()[0];
 }
 
 /**

src/autocomplete/RoomProvider.js

@@ -23,7 +23,6 @@ import AutocompleteProvider from './AutocompleteProvider';
 import {MatrixClientPeg} from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
-import {getDisplayAliasForRoom} from '../Rooms';
 import * as sdk from '../index';
 import _sortBy from 'lodash/sortBy';
 import {makeRoomPermalink} from "../utils/permalinks/Permalinks";
@@ -40,11 +39,19 @@ function score(query, space) {
     }
 }
 
+function matcherObject(room, displayedAlias, matchName = "") {
+    return {
+        room,
+        matchName,
+        displayedAlias,
+    };
+}
+
 export default class RoomProvider extends AutocompleteProvider {
     constructor() {
         super(ROOM_REGEX);
         this.matcher = new QueryMatcher([], {
-            keys: ['displayedAlias', 'name'],
+            keys: ['displayedAlias', 'matchName'],
         });
     }
 
@@ -56,16 +63,16 @@ export default class RoomProvider extends AutocompleteProvider {
         const {command, range} = this.getCurrentCommand(query, selection, force);
         if (command) {
             // the only reason we need to do this is because Fuse only matches on properties
-            let matcherObjects = client.getVisibleRooms().filter(
-                (room) => !!room && !!getDisplayAliasForRoom(room),
-            ).map((room) => {
-                return {
-                    room: room,
-                    name: room.name,
-                    displayedAlias: getDisplayAliasForRoom(room),
-                };
-            });
-
+            let matcherObjects = client.getVisibleRooms().reduce((aliases, room) => {
+                if (room.getCanonicalAlias()) {
+                    aliases = aliases.concat(matcherObject(room, room.getCanonicalAlias(), room.name));
+                }
+                if (room.getAltAliases().length) {
+                    const altAliases = room.getAltAliases().map(alias => matcherObject(room, alias));
+                    aliases = aliases.concat(altAliases);
+                }
+                return aliases;
+            }, []);
             // Filter out any matches where the user will have also autocompleted new rooms
             matcherObjects = matcherObjects.filter((r) => {
                 const tombstone = r.room.currentState.getStateEvents("m.room.tombstone", "");
@@ -84,16 +91,16 @@ export default class RoomProvider extends AutocompleteProvider {
             completions = _sortBy(completions, [
                 (c) => score(matchedString, c.displayedAlias),
                 (c) => c.displayedAlias.length,
-            ]).map((room) => {
-                const displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
+            ]);
+            completions = completions.map((room) => {
                 return {
-                    completion: displayAlias,
-                    completionId: displayAlias,
+                    completion: room.displayedAlias,
+                    completionId: room.room.roomId,
                     type: "room",
                     suffix: ' ',
-                    href: makeRoomPermalink(displayAlias),
+                    href: makeRoomPermalink(room.displayedAlias),
                     component: (
-                        <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.name} description={displayAlias} />
+                        <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.room.name} description={room.displayedAlias} />
                     ),
                     range,
                 };

src/components/views/elements/Pill.js

@@ -23,7 +23,6 @@ import classNames from 'classnames';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import { getDisplayAliasForRoom } from '../../../Rooms';
 import FlairStore from "../../../stores/FlairStore";
 import {getPrimaryPermalinkEntity} from "../../../utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -129,7 +128,7 @@ const Pill = createReactClass({
                 const localRoom = resourceId[0] === '#' ?
                     MatrixClientPeg.get().getRooms().find((r) => {
                         return r.getCanonicalAlias() === resourceId ||
-                               r.getAliases().includes(resourceId);
+                               r.getAltAliases().includes(resourceId);
                     }) : MatrixClientPeg.get().getRoom(resourceId);
                 room = localRoom;
                 if (!localRoom) {
@@ -237,12 +236,12 @@ const Pill = createReactClass({
             case Pill.TYPE_ROOM_MENTION: {
                 const room = this.state.room;
                 if (room) {
-                    linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                    linkText = resource;
                     if (this.props.shouldShowPillAvatar) {
                         avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
                     }
-                    pillClass = 'mx_RoomPill';
                 }
+                pillClass = 'mx_RoomPill';
             }
                 break;
             case Pill.TYPE_GROUP_MENTION: {

src/editor/autocomplete.js

@@ -102,7 +102,7 @@ export default class AutocompleteWrapperModel {
         const text = completion.completion;
         switch (completion.type) {
             case "room":
-                return [this._partCreator.roomPill(completionId), this._partCreator.plain(completion.suffix)];
+                return [this._partCreator.roomPill(text, completionId), this._partCreator.plain(completion.suffix)];
             case "at-room":
                 return [this._partCreator.atRoomPill(completionId), this._partCreator.plain(completion.suffix)];
             case "user":

src/editor/parts.js

@@ -422,14 +422,15 @@ export class PartCreator {
         return new PillCandidatePart(text, this._autoCompleteCreator);
     }
 
-    roomPill(alias) {
+    roomPill(alias, roomId) {
         let room;
-        if (alias[0] === '#') {
-            room = this._client.getRooms().find((r) => {
-                return r.getCanonicalAlias() === alias || r.getAliases().includes(alias);
-            });
+        if (roomId || alias[0] !== "#") {
+            room = this._client.getRoom(roomId || alias);
         } else {
-            room = this._client.getRoom(alias);
+            room = this._client.getRooms().find((r) => {
+                return r.getCanonicalAlias() === alias ||
+                       r.getAltAliases().includes(alias);
+            });
         }
         return new RoomPillPart(alias, room);
     }