Improve chatroom name rendering

- Take locked_muc_domain into consideration in chatroom display name
- Use getDisplayName when rendering the heading name
- Give preference to bookmark name if it exists

spec/bookmarks.js

@@ -134,7 +134,7 @@
             });
             _converse.connection._dataRecv(test_utils.createRequest(stanza));
             await test_utils.waitUntil(() => view.model.get('bookmarked'));
-            toggle = view.el.querySelector('.toggle-bookmark');
+            toggle = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark'));
             expect(view.model.get('bookmarked')).toBeTruthy();
             expect(toggle.title).toBe('Unbookmark this groupchat');
             expect(u.hasClass('on-button', toggle), true);
@@ -224,12 +224,19 @@
                 );
                 await _converse.api.rooms.open(`lounge@localhost`);
                 const view = _converse.chatboxviews.get('lounge@localhost');
-                await test_utils.waitUntil(() => !_.isNull(view.el.querySelector('.toggle-bookmark')));
-                var bookmark_icon = view.el.querySelector('.toggle-bookmark');
+                let bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark'));
                 expect(_.includes(bookmark_icon.classList, 'button-on')).toBeFalsy();
+                _converse.bookmarks.create({
+                    'jid': view.model.get('jid'),
+                    'autojoin': false,
+                    'name':  'The lounge',
+                    'nick': ' some1'
+                });
                 view.model.set('bookmarked', true);
+                bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark'));
                 expect(_.includes(bookmark_icon.classList, 'button-on')).toBeTruthy();
                 view.model.set('bookmarked', false);
+                bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark'));
                 expect(_.includes(bookmark_icon.classList, 'button-on')).toBeFalsy();
                 done();
             }));
@@ -264,7 +271,7 @@
                 });
                 expect(_converse.bookmarks.length).toBe(1);
                 expect(view.model.get('bookmarked')).toBeTruthy();
-                var bookmark_icon = view.el.querySelector('.toggle-bookmark');
+                let bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark'));
                 expect(u.hasClass('button-on', bookmark_icon)).toBeTruthy();
 
                 spyOn(_converse.connection, 'sendIQ').and.callFake(function (iq, callback, errback) {
@@ -273,6 +280,7 @@
                 });
                 spyOn(_converse.connection, 'getUniqueId').and.callThrough();
                 bookmark_icon.click();
+                bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark'));
                 expect(view.toggleBookmark).toHaveBeenCalled();
                 expect(u.hasClass('button-on', bookmark_icon)).toBeFalsy();
                 expect(_converse.bookmarks.length).toBe(0);

src/converse-bookmark-views.js

@@ -127,20 +127,6 @@ converse.plugins.add('converse-bookmark-views', {
                 }
             },
 
-            onBookmarked () {
-                const icon = this.el.querySelector('.toggle-bookmark');
-                if (_.isNull(icon)) {
-                    return;
-                }
-                if (this.model.get('bookmarked')) {
-                    icon.classList.add('button-on');
-                    icon.title = __('Unbookmark this groupchat');
-                } else {
-                    icon.classList.remove('button-on');
-                    icon.title = __('Bookmark this groupchat');
-                }
-            },
-
             setBookmarkState () {
                 /* Set whether the groupchat is bookmarked or not.
                  */
@@ -177,7 +163,6 @@ converse.plugins.add('converse-bookmark-views', {
                     this.renderBookmarkForm();
                 } else {
                     models.forEach(model => model.destroy());
-                    this.el.querySelector('.toggle-bookmark').classList.remove('button-on');
                 }
             }
         }
@@ -372,10 +357,7 @@ converse.plugins.add('converse-bookmark-views', {
 
         _converse.api.listen.on('bookmarksInitialized', initBookmarkViews);
 
-        _converse.api.listen.on('chatRoomOpened', view => {
-            view.model.on('change:bookmarked', view.onBookmarked, view);
-            view.setBookmarkState();
-        });
+        _converse.api.listen.on('chatRoomOpened', view => view.setBookmarkState());
         /************************ END Event Handlers ************************/
     }
 });

src/converse-muc-views.js

@@ -559,6 +559,7 @@ converse.plugins.add('converse-muc-views', {
                 this.model.on('change:affiliation', this.renderHeading, this);
                 this.model.on('change:connection_status', this.onConnectionStatusChanged, this);
                 this.model.on('change:hidden_occupants', this.updateOccupantsToggle, this);
+                this.model.on('change:bookmarked', this.renderHeading, this);
                 this.model.on('change:jid', this.renderHeading, this);
                 this.model.on('change:name', this.renderHeading, this);
                 this.model.on('change:role', this.renderBottomPanel, this);
@@ -739,6 +740,7 @@ converse.plugins.add('converse-muc-views', {
                  */
                 return tpl_chatroom_head(
                     Object.assign(this.model.toJSON(), {
+                        'title': this.model.getDisplayName(),
                         'Strophe': Strophe,
                         '_converse': _converse,
                         'info_close': __('Close and leave this groupchat'),

src/headless/converse-bookmarks.js

@@ -40,7 +40,17 @@ converse.plugins.add('converse-bookmarks', {
         // New functions which don't exist yet can also be added.
 
         ChatRoom: {
-            getAndPersistNickname(nick) {
+            getDisplayName () {
+                const { _converse } = this.__super__;
+                if (this.get('bookmarked') && _converse.bookmarks) {
+                    const bookmark = _converse.bookmarks.findWhere({'jid': this.get('jid')});
+                    return bookmark.get('name');
+                } else {
+                    return this.__super__.getDisplayName.apply(this, arguments);
+                }
+            },
+
+            getAndPersistNickname (nick) {
                 const { _converse } = this.__super__;
                 nick = nick || _converse.getNicknameFromBookmark(this.get('jid'));
                 return this.__super__.getAndPersistNickname.call(this, nick);

src/headless/converse-muc.js

@@ -356,7 +356,14 @@ converse.plugins.add('converse-muc', {
             },
 
             getDisplayName () {
-                return this.get('name') || this.get('jid');
+                const name = this.get('name');
+                if (name) {
+                    return name;
+                } else if (_converse.locked_muc_domain === 'hidden') {
+                    return Strophe.getNodeFromJid(this.get('jid'));
+                } else {
+                    return this.get('jid');
+                }
             },
 
             /**

src/templates/chatroom_head.html

@@ -1,13 +1,7 @@
 <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
 <div class="chatbox-title">
     <div class="chat-title" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >
-        {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
-            {{{ o.name }}}
-        {[ } else if (o._converse.locked_muc_domain === 'hidden') { ]}
-            {{{ o.Strophe.getNodeFromJid(o.jid) }}}
-        {[ } else { ]}
-            {{{ o.Strophe.getNodeFromJid(o.jid) }}}@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
-        {[ } ]}
+        {{{ o.title }}}
     </div>
     <!-- Sanitized in converse-muc-views. We want to render links. -->
     <p class="chatroom-description">{{o.description}}</p>