DEV: Add rawTitle property support to modal-tab (#10221)

DEV: Add rawTitle property support to modal-tab (#10221)

const panels = [
  { id: "test1", rawTitle: "Test 1" },
  { id: "test2", rawTitle: "Test 2" }
];

showModal("a-modal", { panels }));
diff --git a/app/assets/javascripts/discourse/app/components/modal-tab.js b/app/assets/javascripts/discourse/app/components/modal-tab.js
index 94ff00e..3211fbb 100644
--- a/app/assets/javascripts/discourse/app/components/modal-tab.js
+++ b/app/assets/javascripts/discourse/app/components/modal-tab.js
@@ -1,6 +1,8 @@
-import { equal, alias } from "@ember/object/computed";
+import I18n from "I18n";
 import Component from "@ember/component";
+import { equal } from "@ember/object/computed";
 import { propertyEqual } from "discourse/lib/computed";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
   tagName: "li",
@@ -10,9 +12,13 @@ export default Component.extend({
   panelsLength: null,
   classNameBindings: ["isActive", "singleTab", "panel.id"],
   singleTab: equal("panelsLength", 1),
-  title: alias("panel.title"),
   isActive: propertyEqual("panel.id", "selectedPanel.id"),
 
+  @discourseComputed("panel.title", "panel.rawTitle")
+  title(title, rawTitle) {
+    return title ? I18n.t(title) : rawTitle;
+  },
+
   click() {
     this.onSelectPanel(this.panel);
   }
diff --git a/app/assets/javascripts/discourse/app/templates/components/modal-tab.hbs b/app/assets/javascripts/discourse/app/templates/components/modal-tab.hbs
index c598795..ab17eed 100644
--- a/app/assets/javascripts/discourse/app/templates/components/modal-tab.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/modal-tab.hbs
@@ -1 +1 @@
-{{i18n title}}
+{{title}}
diff --git a/test/javascripts/acceptance/modal-test.js b/test/javascripts/acceptance/modal-test.js
index 25e52cd..d07e5a9 100644
--- a/test/javascripts/acceptance/modal-test.js
+++ b/test/javascripts/acceptance/modal-test.js
@@ -54,6 +54,25 @@ QUnit.skip("modal", async function(assert) {
   );
 });
 
+QUnit.test("rawTitle in modal panels", async function(assert) {
+  Ember.TEMPLATES["modal/test-raw-title-panels"] = Ember.HTMLBars.compile("");
+  const panels = [
+    { id: "test1", rawTitle: "Test 1" },
+    { id: "test2", rawTitle: "Test 2" }
+  ];
+
+  await visit("/");
+  run(() => showModal("test-raw-title-panels", { panels }));
+
+  assert.equal(
+    find(".d-modal .modal-tab:first-child")
+      .text()
+      .trim(),
+    "Test 1",
+    "it should display the raw title"
+  );
+});
+
 acceptance("Modal Keyboard Events", { loggedIn: true });
 
 QUnit.test("modal-keyboard-events", async function(assert) {

GitHub sha: 942cc9b5

This commit appears in #10221 which was approved by jjaffeux. It was merged by CvX.