Updating Converse upstream (with bootstrap5):

* bootstrap 5 compatibility
* other Converse updates integration
* hack to get the sidebar work as with Converse v10.
* modal onHide was renamed close.
* fix slow mode infobox margin.
* fix margin
* shorter action label, for better dropdown UX.

conversejs/custom/plugins/notes/templates/muc-note.js

@@ -67,7 +67,7 @@ export function tplMucNote (el, note) {
               : ''
           }
           ${_tplNoteForm(note)}
-          <fieldset class="form-group">
+          <fieldset>
             <input type="submit" class="btn btn-primary" value="${__('Ok')}" />
             <input type="button" class="btn btn-secondary button-cancel"
               value="${__('Cancel')}" @click=${el.toggleEdit}
@@ -81,7 +81,7 @@ function _tplNoteForm (note) {
   // eslint-disable-next-line no-undef
   const i18nNoteDesc = __(LOC_moderator_note_description)
 
-  return html`<fieldset class="form-group">
+  return html`<fieldset>
       <textarea
         class="form-control" name="description"
         placeholder="${i18nNoteDesc}"
@@ -116,7 +116,7 @@ export function tplMucCreateNoteForm (notesEl, occupant) {
           : ''
       }
       ${_tplNoteForm(undefined)}
-      <fieldset class="form-group">
+      <fieldset>
         <input type="submit" class="btn btn-primary" value="${i18nOk}" />
         <input type="button" class="btn btn-secondary button-cancel"
           value="${i18nCancel}" @click=${notesEl.closeCreateNoteForm}

conversejs/custom/plugins/poll/components/poll-form-view.js

@@ -113,7 +113,7 @@ export default class MUCPollFormView extends CustomElement {
       await api.sendIQ(iq)
 
       if (this.modal) {
-        this.modal.onHide()
+        this.modal.close()
       }
     } catch (err) {
       if (u.isErrorStanza(err)) {

conversejs/custom/plugins/poll/modals/poll-form.js

@@ -13,8 +13,8 @@ class PollFormModal extends BaseModal {
     super.initialize()
   }
 
-  onHide () {
-    super.onHide()
+  close () {
+    super.close()
     api.modal.remove('livechat-converse-poll-form-modal')
   }
 

conversejs/custom/plugins/poll/templates/poll-form.js

@@ -44,7 +44,7 @@ export function tplPollForm (el) {
 
             ${formFieldTemplates}
 
-            <fieldset class="buttons form-group">
+            <fieldset class="buttons">
               <input type="submit" class="btn btn-primary" value="${i18nOk}" />
             </fieldset>
           </form>`

conversejs/custom/plugins/tasks/modals/templates/pick-task-list.js

@@ -19,22 +19,22 @@ export default function (el) {
 
   return html`
     <form class="converse-form converse-form--modal confirm" action="#" @submit=${ev => el.onPick(ev)}>
-        <div class="form-group">
-            <select class="form-control" name="tasklist">
-              ${
-                repeat(muc.tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
-                  return html`<option value="${tasklist.get('id')}">${tasklist.get('name')}</option>`
-                })
-              }
-            </select>
-            <small class="form-text text-muted">
-              ${i18nMessage}
-            </small>
-        </div>
+        <fieldset>
+          <select class="form-control" name="tasklist">
+            ${
+              repeat(muc.tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
+                return html`<option value="${tasklist.get('id')}">${tasklist.get('name')}</option>`
+              })
+            }
+          </select>
+          <small class="form-text text-muted">
+            ${i18nMessage}
+          </small>
+        </fieldset>
 
-        <div class="form-group">
-            <button type="submit" class="btn btn-primary">${__('OK')}</button>
-            <input type="button" class="btn btn-secondary" data-dismiss="modal" value="${__('Cancel')}"/>
-        </div>
+        <fieldset>
+          <button type="submit" class="btn btn-primary">${__('OK')}</button>
+          <input type="button" class="btn btn-secondary" data-dismiss="modal" value="${__('Cancel')}"/>
+        </fieldset>
     </form>`
 }

conversejs/custom/plugins/tasks/templates/muc-task-lists.js

@@ -24,7 +24,7 @@ export default function tplMucTaskLists (el, tasklists) {
       })
     }
     <form class="converse-form" @submit=${el.submitCreateTaskList}>
-      <div class="form-group">
+      <fieldset>
         <label>
           ${i18nCreateTaskList}
           <input type="text" value="" class="form-control" name="name" placeholder="${i18nTaskListName}" />
@@ -34,6 +34,6 @@ export default function tplMucTaskLists (el, tasklists) {
           ? ''
           : html`<div class="invalid-feedback d-block">${el.create_tasklist_error_message}</div>`
         }
-      </div>
+      </fieldset>
     </form>`
 }

conversejs/custom/plugins/tasks/templates/muc-task.js

@@ -45,7 +45,7 @@ export function tplMucTask (el, task) {
       <div class="task-line draggables-line">
         <form class="converse-form" @submit=${el.saveTask}>
           ${_tplTaskForm(task)}
-          <fieldset class="form-group">
+          <fieldset>
             <input type="submit" class="btn btn-primary" value="${__('Ok')}" />
             <input type="button" class="btn btn-secondary button-cancel"
               value="${__('Cancel')}" @click=${el.toggleEdit}
@@ -61,7 +61,7 @@ function _tplTaskForm (task) {
   // eslint-disable-next-line no-undef
   const i18nTaskDesc = __(LOC_task_description)
 
-  return html`<fieldset class="form-group">
+  return html`<fieldset>
       <input type="text" name="name"
         class="form-control" value="${task ? task.get('name') : ''}"
         placeholder="${i18nTaskName}"
@@ -80,7 +80,7 @@ export function tplMucAddTaskForm (tasklistEl, _tasklist) {
   return html`
     <form class="task-list-add-task converse-form" @submit=${tasklistEl.submitAddTask}>
       ${_tplTaskForm(undefined)}
-      <fieldset class="form-group">
+      <fieldset>
         <input type="submit" class="btn btn-primary" value="${i18nOk}" />
         <input type="button" class="btn btn-secondary button-cancel"
           value="${i18nCancel}" @click=${tasklistEl.closeAddTaskForm}