show canonical aliases in timeline, and set/remove implicit ones

src/TextForEvent.js

@@ -240,6 +240,24 @@ function textForRoomAliasesEvent(ev) {
     }
 }
 
+function textForCanonicalAliasEvent(ev) {
+    const senderName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    const oldAlias = ev.getPrevContent().alias;
+    const newAlias = ev.getContent().alias;
+
+    if (newAlias) {
+        return _t('%(senderName)s set the canonical address for this room to %(address)s.', {
+            senderName: senderName,
+            address: ev.getContent().alias,
+        });
+    }
+    else if (oldAlias) {
+        return _t('%(senderName)s removed the canonical address for this room.', {
+            senderName: senderName,
+        });
+    }
+}
+
 function textForCallAnswerEvent(event) {
     const senderName = event.sender ? event.sender.name : _t('Someone');
     const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
@@ -402,6 +420,7 @@ const handlers = {
 
 const stateHandlers = {
     'm.room.aliases': textForRoomAliasesEvent,
+    'm.room.canonical_alias': textForCanonicalAliasEvent,
     'm.room.name': textForRoomNameEvent,
     'm.room.topic': textForTopicEvent,
     'm.room.member': textForMemberEvent,

src/components/views/room_settings/AliasSettings.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -97,18 +98,19 @@ module.exports = React.createClass({
             }
         }
 
-
-        // save new canonical alias
         let oldCanonicalAlias = null;
         if (this.props.canonicalAliasEvent) {
             oldCanonicalAlias = this.props.canonicalAliasEvent.getContent().alias;
         }
-        if (oldCanonicalAlias !== this.state.canonicalAlias) {
+
+        let newCanonicalAlias = this.state.canonicalAlias;
+
+        if (this.props.canSetCanonicalAlias && oldCanonicalAlias !== newCanonicalAlias) {
             console.log("AliasSettings: Updating canonical alias");
             promises = [Promise.all(promises).then(
                 MatrixClientPeg.get().sendStateEvent(
                     this.props.roomId, "m.room.canonical_alias", {
-                        alias: this.state.canonicalAlias,
+                        alias: newCanonicalAlias,
                     }, "",
                 ),
             )];
@@ -161,6 +163,12 @@ module.exports = React.createClass({
                 description: _t('\'%(alias)s\' is not a valid format for an alias', { alias: alias }),
             });
         }
+
+        if (!this.props.canonicalAlias) {
+            this.setState({
+                canonicalAlias: alias
+            });
+        }
     },
 
     onLocalAliasChanged: function(alias, index) {
@@ -184,10 +192,15 @@ module.exports = React.createClass({
         // promptly setState anyway, it's just about acceptable.  The alternative
         // would be to arbitrarily deepcopy to a temp variable and then setState
         // that, but why bother when we can cut this corner.
-        this.state.domainToAliases[localDomain].splice(index, 1);
+        const alias = this.state.domainToAliases[localDomain].splice(index, 1);
         this.setState({
             domainToAliases: this.state.domainToAliases,
         });
+        if (this.props.canonicalAlias === alias) {
+            this.setState({
+                canonicalAlias: null,
+            });
+        }
     },
 
     onCanonicalAliasChange: function(event) {
@@ -205,7 +218,7 @@ module.exports = React.createClass({
         let canonical_alias_section;
         if (this.props.canSetCanonicalAlias) {
             canonical_alias_section = (
-                <select onChange={this.onCanonicalAliasChange} defaultValue={this.state.canonicalAlias}>
+                <select onChange={this.onCanonicalAliasChange} value={this.state.canonicalAlias}>
                     <option value="" key="unset">{ _t('not specified') }</option>
                     {
                         Object.keys(self.state.domainToAliases).map(function(domain, i) {

src/components/views/rooms/EventTile.js

@@ -49,6 +49,7 @@ const eventTileTypes = {
 const stateEventTileTypes = {
     'm.room.aliases': 'messages.TextualEvent',
     // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex
+    'm.room.canonical_alias': 'messages.TextualEvent',
     'm.room.create': 'messages.RoomCreate',
     'm.room.member': 'messages.TextualEvent',
     'm.room.name': 'messages.TextualEvent',

src/i18n/strings/en_EN.json

@@ -1251,6 +1251,8 @@
     "%(senderName)s removed %(count)s %(removedAddresses)s as addresses for this room.|one": "%(senderName)s removed %(removedAddresses)s as an address for this room.",
     "%(senderName)s removed %(count)s %(removedAddresses)s as addresses for this room.|other": "%(senderName)s removed %(removedAddresses)s as addresses for this room.",
     "%(senderName)s added %(addedAddresses)s and removed %(removedAddresses)s as addresses for this room.": "%(senderName)s added %(addedAddresses)s and removed %(removedAddresses)s as addresses for this room.",
+    "%(senderName)s set the canonical address for this room to %(address)s.": "%(senderName)s set the canonical address for this room to %(address)s.",
+    "%(senderName)s removed the canonical address for this room.": "%(senderName)s removed the canonical address for this room.",
     "File to import": "File to import",
     "Import": "Import",
     "Failed to set direct chat tag": "Failed to set direct chat tag",