modtools: Test that error renders when not allowed to fetch affiliation list

Also fix scrolling bug

spec/modtools.js

@@ -135,5 +135,65 @@
             expect(user_els[0].textContent.trim()).toBe('No users with that role found.');
             done();
         }));
+
+        it("shows an error message if a particular affiliation list may not be retrieved",
+            mock.initConverse(
+                null, ['rosterGroupsFetched'], {},
+                async function (done, _converse) {
+
+            spyOn(_converse.ChatRoomView.prototype, 'showModeratorToolsModal').and.callThrough();
+            const muc_jid = 'lounge@montague.lit';
+            const members = [
+                {'jid': 'hag66@shakespeare.lit', 'nick': 'witch', 'affiliation': 'member'},
+                {'jid': 'gower@shakespeare.lit', 'nick': 'gower', 'affiliation': 'member'},
+                {'jid': 'wiccarocks@shakespeare.lit', 'nick': 'wiccan', 'affiliation': 'admin'},
+                {'jid': 'crone1@shakespeare.lit', 'nick': 'thirdwitch', 'affiliation': 'owner'},
+                {'jid': 'romeo@montague.lit', 'nick': 'romeo', 'affiliation': 'owner'},
+            ];
+            await test_utils.openAndEnterChatRoom(_converse, muc_jid, 'romeo', [], members);
+            const view = _converse.chatboxviews.get(muc_jid);
+            await u.waitUntil(() => (view.model.occupants.length === 5));
+
+            const textarea = view.el.querySelector('.chat-textarea');
+            textarea.value = '/modtools';
+            const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, 'keyCode': 13 };
+            view.onKeyDown(enter);
+            await u.waitUntil(() => view.showModeratorToolsModal.calls.count());
+
+            const modal = view.modtools_modal;
+            await u.waitUntil(() => u.isVisible(modal.el), 1000);
+            const tab = modal.el.querySelector('#affiliations-tab');
+            // Clear so that we don't match older stanzas
+            _converse.connection.IQ_stanzas = [];
+            const IQ_stanzas = _converse.connection.IQ_stanzas;
+            tab.click();
+            const select = modal.el.querySelector('.select-affiliation');
+            select.value = 'outcast';
+            const button = modal.el.querySelector('.btn-primary[name="users_with_affiliation"]');
+            button.click();
+
+            const iq_query = await u.waitUntil(() => _.filter(
+                IQ_stanzas,
+                s => sizzle(`iq[to="${muc_jid}"] query[xmlns="${Strophe.NS.MUC_ADMIN}"] item[affiliation="outcast"]`, s).length
+            ).pop());
+
+            const error = u.toStanza(
+                `<iq from="${muc_jid}"
+                     id="${iq_query.getAttribute('id')}"
+                     type="error"
+                     to="${_converse.jid}">
+
+                     <error type="auth">
+                        <forbidden xmlns="${Strophe.NS.STANZAS}"/>
+                     </error>
+                </iq>`);
+            _converse.connection._dataRecv(test_utils.createRequest(error));
+            await u.waitUntil(() => !modal.loading_users_with_affiliation);
+
+            const user_els = modal.el.querySelectorAll('.list-group--users > li');
+            expect(user_els.length).toBe(1);
+            expect(user_els[0].textContent.trim()).toBe('Error: not allowed to fetch outcast list for MUC lounge@montague.lit');
+            done();
+        }));
     });
 }));

src/templates/moderator_tools_modal.html

@@ -19,7 +19,7 @@
                 </ul>
 
                 <div class="tab-content">
-                    <div class="tab-pane active" id="roles-tabpanel" role="tabpanel" aria-labelledby="roles-tab">
+                    <div class="tab-pane tab-pane--columns active" id="roles-tabpanel" role="tabpanel" aria-labelledby="roles-tab">
                         <form class="converse-form query-role">
                             <div class="form-group">
                                 <label for="role">
@@ -90,7 +90,7 @@
                     </div>
 
 
-                    <div class="tab-pane" id="affiliations-tabpanel" role="tabpanel" aria-labelledby="affiliations-tab">
+                    <div class="tab-pane tab-pane--columns" id="affiliations-tabpanel" role="tabpanel" aria-labelledby="affiliations-tab">
                         <form class="converse-form query-affiliation">
                             <div class="form-group">
                                 <label for="affiliation">
@@ -110,56 +110,58 @@
                                 </div>
                             </div>
                         </form>
+                        <div class="scrollable-container">
                         <ul class="list-group list-group--users">
                             {[ if (o.loading_users_with_affiliation)  { ]}
                                 <li class="list-group-item"> <span class="spinner fa fa-spinner centered"/> </li>
                             {[ } else { ]}
                                 {[ if (o.users_with_affiliation && o.users_with_affiliation.length === 0) { ]}
                                     <li class="list-group-item">{{{o.__('No users with that affiliation found.')}}}</li>
-                                {[ } ]}
-                                {[ if (o.users_with_affiliation instanceof Error) { ]}
+                                {[ } else if (o.users_with_affiliation instanceof Error) { ]}
                                     <li class="list-group-item">{{{o.users_with_affiliation.message}}}</li>
-                                {[ } ]}
-                                {[ (o.users_with_affiliation || []).forEach(function (item) { ]}
-                                    <li class="list-group-item">
-                                        <ul class="list-group">
-                                            <li class="list-group-item active">
-                                                <div><strong>JID:</strong> {{{item.jid}}}</div>
-                                            </li>
-                                            <li class="list-group-item">
-                                                <div><strong>Nickname:</strong> {{{item.nick}}}</div>
-                                            </li>
-                                            <li class="list-group-item">
-                                                <div><strong>Affiliation:</strong> {{{item.affiliation}}} <a href="#" data-form="affiliation-form" class="toggle-form right fa fa-wrench"></a></div>
-                                                <form class="affiliation-form hidden">
-                                                    <div class="form-group">
-                                                        <input type="hidden" name="jid" value="{{{item.jid}}}"/>
-                                                        <input type="hidden" name="nick" value="{{{item.nick}}}"/>
-                                                        <div class="row">
-                                                            <div class="col">
-                                                                <label><strong>{{{o.__('New affiliation')}}}:</strong></label>
-                                                                <select class="custom-select select-affiliation" name="affiliation">
-                                                                    {[ o.allowed_affiliations.forEach(function (aff) { ]}
-                                                                        <option value="{{{aff}}}" {[ if (aff === item.affiliation)  { ]} selected="selected" {[ } ]}>{{{aff}}}</option>
-                                                                    {[ }); ]}
-                                                                </select>
-                                                            </div>
-                                                            <div class="col">
-                                                                <label><strong>{{{o.__('Reason')}}}:</strong></label>
-                                                                <input class="form-control" type="text" name="reason"/>
+                                {[ } else { ]}
+                                    {[ (o.users_with_affiliation || []).forEach(function (item) { ]}
+                                        <li class="list-group-item">
+                                            <ul class="list-group">
+                                                <li class="list-group-item active">
+                                                    <div><strong>JID:</strong> {{{item.jid}}}</div>
+                                                </li>
+                                                <li class="list-group-item">
+                                                    <div><strong>Nickname:</strong> {{{item.nick}}}</div>
+                                                </li>
+                                                <li class="list-group-item">
+                                                    <div><strong>Affiliation:</strong> {{{item.affiliation}}} <a href="#" data-form="affiliation-form" class="toggle-form right fa fa-wrench"></a></div>
+                                                    <form class="affiliation-form hidden">
+                                                        <div class="form-group">
+                                                            <input type="hidden" name="jid" value="{{{item.jid}}}"/>
+                                                            <input type="hidden" name="nick" value="{{{item.nick}}}"/>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <label><strong>{{{o.__('New affiliation')}}}:</strong></label>
+                                                                    <select class="custom-select select-affiliation" name="affiliation">
+                                                                        {[ o.allowed_affiliations.forEach(function (aff) { ]}
+                                                                            <option value="{{{aff}}}" {[ if (aff === item.affiliation)  { ]} selected="selected" {[ } ]}>{{{aff}}}</option>
+                                                                        {[ }); ]}
+                                                                    </select>
+                                                                </div>
+                                                                <div class="col">
+                                                                    <label><strong>{{{o.__('Reason')}}}:</strong></label>
+                                                                    <input class="form-control" type="text" name="reason"/>
+                                                                </div>
                                                             </div>
                                                         </div>
-                                                    </div>
-                                                    <div class="form-group">
-                                                        <input type="submit" class="btn btn-primary" name="change" value="{{{o.__('Change affiliation')}}}"/>
-                                                    </div>
-                                                </form>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                {[ }); ]}
+                                                        <div class="form-group">
+                                                            <input type="submit" class="btn btn-primary" name="change" value="{{{o.__('Change affiliation')}}}"/>
+                                                        </div>
+                                                    </form>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    {[ }); ]}
+                                {[ } ]}
                             {[ } ]}
                         </ul>
+                        </div>
                     </div>
                 </div>
             </div>