DEV: Allow displaying both title and panels in modals (#10220)

app/assets/javascripts/discourse/app/lib/show-modal.js

@@ -39,6 +39,8 @@ export default function(name, opts) {
   route.render(fullName, renderArgs);
   if (opts.title) {
     modalController.set("title", I18n.t(opts.title));
+  } else {
+    modalController.set("title", null);
   }
 
   if (opts.panels) {

app/assets/javascripts/discourse/app/templates/components/d-modal.hbs

@@ -6,6 +6,16 @@
           {{d-button icon="times" action=(route-action "closeModal" "initiatedByCloseButton") class="btn-flat modal-close close" title="modal.close"}}
         {{/if}}
 
+        {{#if title}}
+          <div class="title">
+            <h3>{{title}}</h3>
+
+            {{#if subtitle}}
+              <p>{{subtitle}}</p>
+            {{/if}}
+          </div>
+        {{/if}}
+
         {{#if panels}}
           <ul class="modal-tabs">
             {{#each panels as |panel|}}
@@ -16,14 +26,6 @@
                 onSelectPanel=onSelectPanel}}
             {{/each}}
           </ul>
-        {{else}}
-          <div class="title">
-            <h3>{{title}}</h3>
-
-            {{#if subtitle}}
-              <p>{{subtitle}}</p>
-            {{/if}}
-          </div>
         {{/if}}
       </div>
 

app/assets/stylesheets/common/base/modal.scss

@@ -59,6 +59,8 @@
   align-items: center;
 
   .title {
+    margin-right: 1em;
+
     h3 {
       margin-bottom: 0;
     }
@@ -749,7 +751,6 @@
     .modal-tabs {
       display: inline-flex;
       flex-wrap: wrap;
-      width: calc(100% - 20px);
       flex: 1 0 auto;
       margin: 0;
 

test/javascripts/acceptance/modal-test.js

@@ -1,8 +1,25 @@
+import I18n from "I18n";
 import { run } from "@ember/runloop";
 import { acceptance, controllerFor } from "helpers/qunit-helpers";
 import showModal from "discourse/lib/show-modal";
 
-acceptance("Modal");
+acceptance("Modal", {
+  beforeEach() {
+    this._translations = I18n.translations;
+
+    I18n.translations = {
+      en: {
+        js: {
+          test_title: "Test title"
+        }
+      }
+    };
+  },
+
+  afterEach() {
+    I18n.translations = this._translations;
+  }
+});
 
 QUnit.skip("modal", async function(assert) {
   await visit("/");
@@ -73,6 +90,43 @@ QUnit.test("rawTitle in modal panels", async function(assert) {
   );
 });
 
+QUnit.test("modal title", async function(assert) {
+  Ember.TEMPLATES["modal/test-title"] = Ember.HTMLBars.compile("");
+  Ember.TEMPLATES["modal/test-title-with-body"] = Ember.HTMLBars.compile(
+    "{{#d-modal-body}}test{{/d-modal-body}}"
+  );
+
+  await visit("/");
+
+  run(() => showModal("test-title", { title: "test_title" }));
+  assert.equal(
+    find(".d-modal .title")
+      .text()
+      .trim(),
+    "Test title",
+    "it should display the title"
+  );
+
+  await click(".d-modal .close");
+
+  run(() => showModal("test-title-with-body", { title: "test_title" }));
+  assert.equal(
+    find(".d-modal .title")
+      .text()
+      .trim(),
+    "Test title",
+    "it should display the title when used with d-modal-body"
+  );
+
+  await click(".d-modal .close");
+
+  run(() => showModal("test-title"));
+  assert.ok(
+    find(".d-modal .title").length === 0,
+    "it should not re-use the previous title"
+  );
+});
+
 acceptance("Modal Keyboard Events", { loggedIn: true });
 
 QUnit.test("modal-keyboard-events", async function(assert) {