MDL-67862 message: Render dialogue header only when necessary

message/amd/src/message_drawer_view_conversation_constants.js

@@ -46,6 +46,7 @@ define([], function() {
         ACTION_VIEW_CONTACT: '[data-action="view-contact"]',
         ACTION_VIEW_GROUP_INFO: '[data-action="view-group-info"]',
         CAN_RECEIVE_FOCUS: 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]',
+        CONFIRM_DIALOGUE: '[data-region="confirm-dialogue"]',
         CONFIRM_DIALOGUE_BUTTON_TEXT: '[data-region="dialogue-button-text"]',
         CONFIRM_DIALOGUE_CANCEL_BUTTON: '[data-action="cancel-confirm"]',
         CONFIRM_DIALOGUE_CONTAINER: '[data-region="confirm-dialogue-container"]',

message/amd/src/message_drawer_view_conversation_renderer.js

@@ -991,11 +991,15 @@ function(
         }
 
         if (headerText) {
-            dialogueHeader.removeClass('hidden');
+            // Create the dialogue header.
+            dialogueHeader = $('<h3 class="h6" data-region="dialogue-header"></h3>');
             dialogueHeader.text(headerText);
-        } else {
-            dialogueHeader.addClass('hidden');
-            dialogueHeader.text('');
+            // Prepend it to the confirmation body.
+            var confirmDialogue = dialogue.find(SELECTORS.CONFIRM_DIALOGUE);
+            confirmDialogue.prepend(dialogueHeader);
+        } else if (dialogueHeader.length) {
+            // Header text is empty but dialogue header is present, so remove it.
+            dialogueHeader.remove();
         }
 
         buttons.forEach(function(button) {
@@ -1033,8 +1037,11 @@ function(
         dialogue.find('button').addClass('hidden');
         cancelButton.removeClass('hidden');
         text.text('');
-        dialogueHeader.addClass('hidden');
-        dialogueHeader.text('');
+
+        // Remove dialogue header if present.
+        if (dialogueHeader.length) {
+            dialogueHeader.remove();
+        }
 
         header.find(SELECTORS.CAN_RECEIVE_FOCUS).first().focus();
         return true;

message/templates/message_drawer_view_conversation_body_confirm_dialogue.mustache

@@ -36,7 +36,6 @@
 }}
 
 <div class="p-3 bg-white" data-region="confirm-dialogue" role="alert">
-    <h3 class="h6 hidden" data-region="dialogue-header"></h3>
     <p class="text-muted" data-region="dialogue-text"></p>
     <div class="mb-2 hidden" data-region="delete-messages-for-all-users-toggle-container">
         <label class="custom-control-label ml-2 text-muted">