Do not show room id instead of canonical alias

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/domain/session/rightpanel/RoomInfoViewModel.js

@@ -9,7 +9,11 @@ export class RoomInfoViewModel extends ViewModel {
     }
 
     get roomId() {
-        return this._roomSummary.canonicalAlias || this._room.id;
+        return this._room.id;
+    }
+
+    get canonicalAlias() {
+        return this._roomSummary.canonicalAlias;
     }
 
     get name() {

src/platform/web/ui/session/rightpanel/RoomInfoView.js

@@ -12,7 +12,7 @@ export class RoomInfoView extends TemplateView {
             t.div({ className: "RoomAvatar" },
                 [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]),
             t.div({ className: "RoomName" }, [t.h2(vm.name)]),
-            t.div({ className: "RoomId" }, [text(vm.roomId)]),
+            this._createRoomAliasDisplay(vm),
             t.div({ className: "SidebarRow_collection" },
                 [
                     this._createSideBarRow("People", vm.memberCount, { MemberCount: true }),
@@ -21,6 +21,11 @@ export class RoomInfoView extends TemplateView {
         ]);
     }
 
+    _createRoomAliasDisplay(vm) {
+        return vm.canonicalAlias ? tag.div({ className: "RoomId" }, [text(vm.canonicalAlias)]) :
+            "";
+    }
+
     _createSideBarRow(label, value, labelClass, valueClass) {
         const labelClassString = classNames({ SidebarLabel: true, ...labelClass });
         const valueClassString = classNames({ SidebarValue: true, ...valueClass });