Improvements to rendering MUC MAM logs before joining

- Add config variable `muc_show_logs_before_join`
- Restore nickname form for the original use-case (when not showing MAM logs before joining).
- Render nickname form in the `.muc-bottom-panel` when showing MAM logs (instead of in a modal)
- Show a message when there aren't any archived messages to show
- Fix converse-mam so that chat logs are properly fetched before entering a MUC

closes #1266

Author: jcbrand

CHANGES.md

@@ -10,9 +10,10 @@
   To add custom emojis, edit the `emojis.json` file.
 - Refactor some presence and status handling code from `converse-core` into `@converse/headless/converse-status`.
 - New API [\_converse.api.headlines](https://conversejs.org/docs/html/api/-_converse.api.headlines.html#.get)
-- New config option [muc-mention-autocomplete-filter](https://conversejs.org/docs/html/configuration.html#muc-mention-autocomplete-filter)
-- New config option [muc-mention-autocomplete-show-avatar](https://conversejs.org/docs/html/configuration.html#muc-mention-autocomplete-show-avatar)
 - New config option [allow_message_retraction](https://conversejs.org/docs/html/configuration.html#allow-message-retraction)
+- New config option [muc-show-logs-before-join](https://conversejs.org/docs/html/configuration.html#muc-show-logs-before-join)
+_ New config option [muc_mention_autocomplete_filter](https://conversejs.org/docs/html/configuration.html#muc_mention_autocomplete_filter)
+_ New config option [muc_mention_autocomplete_show_avatar](https://conversejs.org/docs/html/configuration.html#muc_mention_autocomplete_show_avatar)
 
 - #129: Add support for XEP-0156: Disovering Alternative XMPP Connection Methods. Only XML is supported for now.
 - #1105: Preliminary support for storing persistent data in IndexedDB instead of localStorage

sass/_chatrooms.scss

@@ -316,6 +316,18 @@
             }
         }
 
+        .empty-history-feedback {
+            position: relative;
+            height: 100%;
+            color: var(--text-color-lighten-15-percent);
+            span {
+                width: 100%;
+                text-align: center;
+                position: absolute;
+                margin-top: 50%;
+            }
+        }
+
         .muc-bottom-panel {
             border-top: var(--message-input-border-top);
             height: 3em;
@@ -324,6 +336,20 @@
             font-size: var(--font-size-small);
             background-color: var(--chatroom-head-color);
             color: white;
+
+            &.muc-bottom-panel--nickname {
+                padding: 0;
+                height: 16em;
+
+                .chatroom-form-container {
+                    border-radius: 0 !important;
+
+                    .chatroom-form {
+                        padding-top: 2em;
+                        padding-bottom: 0;
+                    }
+                }
+            }
         }
 
         .sendXMPPMessage {

spec/mam.js

@@ -196,7 +196,7 @@
                     </iq>`);
                 _converse.connection._dataRecv(test_utils.createRequest(result));
                 await u.waitUntil(() => view.model.messages.length === 5);
-                expect(view.model.fetchArchivedMessages.calls.count()).toBe(3);
+                expect(view.model.fetchArchivedMessages.calls.count()).toBe(5);
                 const msg_els = view.content.querySelectorAll('.chat-msg__text');
                 expect(Array.from(msg_els).map(e => e.textContent).join(' ')).toBe("2nd Message 3rd Message 4th Message 5th Message 6th Message");
                 done();

spec/muc.js

@@ -1547,7 +1547,7 @@
                 expect(presencebroadcast.length).toBe(1);
                 presencebroadcast[0].value = ['moderator'];
 
-                view.el.querySelector('input[type="submit"]').click();
+                view.el.querySelector('.chatroom-form input[type="submit"]').click();
 
                 const sent_stanza = sent_IQ.nodeTree;
                 expect(sent_stanza.querySelector('field[var="muc#roomconfig_membersonly"] value').textContent.trim()).toBe('1');
@@ -2578,7 +2578,7 @@
                 expect(el.textContent.trim()).toBe("Configuration for [email protected]");
                 sizzle('[name="muc#roomconfig_membersonly"]', chatroomview.el).pop().click();
                 sizzle('[name="muc#roomconfig_roomname"]', chatroomview.el).pop().value = "New room name"
-                chatroomview.el.querySelector('.btn-primary').click();
+                chatroomview.el.querySelector('.chatroom-form input[type="submit"]').click();
 
                 iq = await u.waitUntil(() => _.filter(IQs, iq => u.matchesSelector(iq, `iq[to="${jid}"][type="set"]`)).pop());
                 const result = $iq({

spec/muc_messages.js

@@ -979,7 +979,7 @@
                 await u.waitUntil(() => view.el.querySelector('.chat-msg__text').textContent ===
                     'hello z3r0 gibson sw0rdf1sh, how are you?', 500);
 
-                const correction = _converse.connection.send.calls.all()[2].args[0];
+                const correction = _converse.connection.send.calls.all()[3].args[0];
                 expect(correction.toLocaleString())
                     .toBe(`<message from="[email protected]/orchard" id="${correction.nodeTree.getAttribute("id")}" `+
                             `to="[email protected]" type="groupchat" `+