Show error messages via objects

Instead of injecting them directly into the DOM.

spec/retractions.js

@@ -706,14 +706,18 @@
                 _converse.connection._dataRecv(test_utils.createRequest(error));
                 await u.waitUntil(() => view.el.querySelectorAll('.chat-error').length === 1);
                 await u.waitUntil(() => view.el.querySelectorAll('.chat-msg--retracted').length === 0);
-                expect(view.model.messages.length).toBe(2);
-                expect(view.model.messages.last().get('retracted')).toBeFalsy();
-                expect(view.model.messages.last().get('is_ephemeral')).toBeFalsy();
-                expect(view.model.messages.last().get('editable')).toBeTruthy();
+                expect(view.model.messages.length).toBe(3);
+                expect(view.model.messages.at(1).get('retracted')).toBeFalsy();
+                expect(view.model.messages.at(1).get('is_ephemeral')).toBeFalsy();
+                expect(view.model.messages.at(1).get('editable')).toBeTruthy();
+
+                const err_msg = "Sorry, something went wrong while trying to retract your message."
+                expect(view.model.messages.at(2).get('message')).toBe(err_msg);
+                expect(view.model.messages.at(2).get('type')).toBe('error');
 
                 expect(view.el.querySelectorAll('.chat-error').length).toBe(1);
                 const errmsg = view.el.querySelector('.chat-error');
-                expect(errmsg.textContent).toBe("Sorry, something went wrong while trying to retract your message.");
+                expect(errmsg.textContent.trim()).toBe("Sorry, something went wrong while trying to retract your message.");
                 done();
             }));
 
@@ -746,15 +750,15 @@
                 await u.waitUntil(() => view.el.querySelectorAll('.chat-msg').length === 1);
 
                 await u.waitUntil(() => view.el.querySelectorAll('.chat-msg--retracted').length === 0);
-                expect(view.model.messages.length).toBe(2);
-                expect(view.model.messages.last().get('retracted')).toBeFalsy();
-                expect(view.model.messages.last().get('is_ephemeral')).toBeFalsy();
-                expect(view.model.messages.last().get('editable')).toBeTruthy();
+                expect(view.model.messages.length).toBe(4);
+                expect(view.model.messages.at(1).get('retracted')).toBeFalsy();
+                expect(view.model.messages.at(1).get('is_ephemeral')).toBeFalsy();
+                expect(view.model.messages.at(1).get('editable')).toBeTruthy();
 
                 const error_messages = view.el.querySelectorAll('.chat-error');
                 expect(error_messages.length).toBe(2);
-                expect(error_messages[0].textContent).toBe("Sorry, something went wrong while trying to retract your message.");
-                expect(error_messages[1].textContent).toBe("Timeout Error: No response from server");
+                expect(error_messages[0].textContent.trim()).toBe("Sorry, something went wrong while trying to retract your message.");
+                expect(error_messages[1].textContent.trim()).toBe("Timeout Error: No response from server");
                 done();
             }));
 

src/converse-chatview.js

@@ -15,7 +15,6 @@ import log from "@converse/headless/log";
 import tpl_chatbox from "templates/chatbox.js";
 import tpl_chatbox_head from "templates/chatbox_head.js";
 import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
-import tpl_error_message from "templates/error_message.html";
 import tpl_help_message from "templates/help_message.html";
 import tpl_info from "templates/info.html";
 import tpl_new_day from "templates/new_day.html";
@@ -518,14 +517,6 @@ converse.plugins.add('converse-chatview', {
                 return isodate;
             },
 
-            showErrorMessage (message) {
-                this.msgs_container.insertAdjacentHTML(
-                    'beforeend',
-                    tpl_error_message({'message': message, 'isodate': (new Date()).toISOString() })
-                );
-                this.scrollDown();
-            },
-
             addSpinner (append=false) {
                 if (this.el.querySelector('.spinner') === null) {
                     if (append) {

src/converse-muc-views.js

@@ -1008,13 +1008,9 @@ converse.plugins.add('converse-muc-views', {
             retractOwnMessage(message) {
                 this.model.retractOwnMessage(message)
                     .catch(e => {
-                        const errmsg = __('Sorry, something went wrong while trying to retract your message.');
-                        if (u.isErrorStanza(e)) {
-                            this.showErrorMessage(errmsg);
-                        } else {
-                            this.showErrorMessage(errmsg);
-                            this.showErrorMessage(e.message);
-                        }
+                        const message = __('Sorry, something went wrong while trying to retract your message.');
+                        this.model.createMessage({message, 'type': 'error'});
+                        !u.isErrorStanza(e) && this.model.createMessage({'message': e.message, 'type': 'error'});
                         log.error(e);
                     });
             },
@@ -1327,7 +1323,8 @@ converse.plugins.add('converse-muc-views', {
                     }
                 }
                 if (show_error) {
-                    this.showErrorMessage(__('Forbidden: you do not have the necessary role in order to do that.'))
+                    const message = __('Forbidden: you do not have the necessary role in order to do that.');
+                    this.model.createMessage({message, 'type': 'error'});
                 }
                 return false;
             },
@@ -1347,16 +1344,19 @@ converse.plugins.add('converse-muc-views', {
                     }
                 }
                 if (show_error) {
-                    this.showErrorMessage(__('Forbidden: you do not have the necessary affiliation in order to do that.'))
+                    const message = __('Forbidden: you do not have the necessary affiliation in order to do that.');
+                    this.model.createMessage({message, 'type': 'error'});
                 }
                 return false;
             },
 
             validateRoleOrAffiliationChangeArgs (command, args) {
                 if (!args) {
-                    this.showErrorMessage(
-                        __('Error: the "%1$s" command takes two arguments, the user\'s nickname and optionally a reason.', command)
+                    const message = __(
+                        'Error: the "%1$s" command takes two arguments, the user\'s nickname and optionally a reason.',
+                        command
                     );
+                    this.model.createMessage({message, 'type': 'error'});
                     return false;
                 }
                 return true;
@@ -1371,17 +1371,20 @@ converse.plugins.add('converse-muc-views', {
                 }
                 const [text, references] = this.model.parseTextForReferences(args); // eslint-disable-line no-unused-vars
                 if (!references.length) {
-                    this.showErrorMessage(__("Error: couldn't find a groupchat participant based on your arguments"));
+                    const message = __("Error: couldn't find a groupchat participant based on your arguments");
+                    this.model.createMessage({message, 'type': 'error'});
                     return;
                 }
                 if (references.length > 1) {
-                    this.showErrorMessage(__("Error: found multiple groupchat participant based on your arguments"));
+                    const message = __("Error: found multiple groupchat participant based on your arguments");
+                    this.model.createMessage({message, 'type': 'error'});
                     return;
                 }
                 const nick_or_jid = references.pop().value;
                 const reason = args.split(nick_or_jid, 2)[1];
                 if (reason && !reason.startsWith(' ')) {
-                    this.showErrorMessage(__("Error: couldn't find a groupchat participant based on your arguments"));
+                    const message = __("Error: couldn't find a groupchat participant based on your arguments");
+                    this.model.createMessage({message, 'type': 'error'});
                     return;
                 }
                 return nick_or_jid;
@@ -1412,10 +1415,11 @@ converse.plugins.add('converse-muc-views', {
                     if (u.isValidJID(nick_or_jid)) {
                         jid = nick_or_jid;
                     } else {
-                        this.showErrorMessage(__(
+                        const message = __(
                             "Couldn't find a participant with that nickname. "+
                             "They might have left the groupchat."
-                        ));
+                        );
+                        this.model.createMessage({message, 'type': 'error'});
                         return;
                     }
                 }
@@ -1459,10 +1463,10 @@ converse.plugins.add('converse-muc-views', {
 
             onCommandError (err) {
                 log.fatal(err);
-                this.showErrorMessage(
+                const message =
                     __("Sorry, an error happened while running the command.") + " " +
-                    __("Check your browser's developer console for details.")
-                );
+                    __("Check your browser's developer console for details.");
+                this.model.createMessage({message, 'type': 'error'});
             },
 
             getAllowedCommands () {
@@ -1608,7 +1612,9 @@ converse.plugins.add('converse-muc-views', {
                             break;
                         } else if (args.length === 0) {
                             // e.g. Your nickname is "coolguy69"
-                            this.showErrorMessage(__('Your nickname is "%1$s"', this.model.get('nick')))
+                            const message = __('Your nickname is "%1$s"', this.model.get('nick'));
+                            this.model.createMessage({message, 'type': 'error'});
+
                         } else {
                             const jid = Strophe.getBareJidFromJid(this.model.get('jid'));
                             api.send($pres({
@@ -1628,10 +1634,13 @@ converse.plugins.add('converse-muc-views', {
                     }
                     case 'register': {
                         if (args.length > 1) {
-                            this.showErrorMessage(__('Error: invalid number of arguments'))
+                            this.model.createMessage({
+                                'message': __('Error: invalid number of arguments'),
+                                'type': 'error'
+                            });
                         } else {
                             this.model.registerNickname().then(err_msg => {
-                                if (err_msg) this.showErrorMessage(err_msg)
+                                err_msg && this.model.createMessage({'message': err_msg, 'type': 'error'});
                             });
                         }
                         break;
@@ -2018,10 +2027,10 @@ converse.plugins.add('converse-muc-views', {
                     await this.model.sendConfiguration(configArray);
                 } catch (e) {
                     log.error(e);
-                    this.showErrorMessage(
+                    const message =
                         __("Sorry, an error occurred while trying to submit the config form.") + " " +
-                        __("Check your browser's developer console for details.")
-                    );
+                        __("Check your browser's developer console for details.");
+                    this.model.createMessage({message, 'type': 'error'});
                 }
                 await this.model.refreshDiscoInfo();
                 this.chatroomview.closeForm();

src/templates/error_message.html

-<div class="message chat-info chat-error" data-isodate="{{{o.isodate}}}">{{{o.message}}}</div>