DEV: Convert `raw-email` modal to component-based API (#23471)

app/assets/javascripts/discourse/app/components/modal/raw-email.hbs

@@ -0,0 +1,53 @@
+<DModal
+  @title={{i18n "raw_email.title"}}
+  class="incoming-email-modal"
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <div class="incoming-email-tabs">
+      <DButton
+        @action={{this.displayRaw}}
+        @label="post.raw_email.displays.raw.button"
+        @title="post.raw_email.displays.raw.title"
+        class={{if (eq this.tab "raw") "active"}}
+      />
+
+      {{#if this.textPart}}
+        <DButton
+          @action={{this.displayTextPart}}
+          @label="post.raw_email.displays.text_part.button"
+          @title="post.raw_email.displays.text_part.title"
+          class={{if (eq this.tab "text_part") "active"}}
+        />
+      {{/if}}
+
+      {{#if this.htmlPart}}
+        <DButton
+          @action={{this.displayHtmlPart}}
+          @label="post.raw_email.displays.html_part.button"
+          @title="post.raw_email.displays.html_part.title"
+          class={{if (eq this.tab "html_part") "active"}}
+        />
+      {{/if}}
+    </div>
+
+    <div class="incoming-email-content">
+      {{#if (eq this.tab "raw")}}
+        {{#if this.rawEmail}}
+          <Textarea @value={{this.rawEmail}} />
+        {{else}}
+          {{i18n "raw_email.not_available"}}
+        {{/if}}
+      {{/if}}
+      {{#if (eq this.tab "text_part")}}
+        <Textarea @value={{this.textPart}} />
+      {{/if}}
+      {{#if (eq this.tab "html_part")}}
+        <IframedHtml
+          @html={{this.htmlPart}}
+          @className="incoming-email-html-part"
+        />
+      {{/if}}
+    </div>
+  </:body>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/raw-email.js

@@ -0,0 +1,41 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import Post from "discourse/models/post";
+
+export default class RawEmailComponent extends Component {
+  @tracked rawEmail = this.args.model.rawEmail || "";
+  @tracked textPart = "";
+  @tracked htmlPart = "";
+  @tracked tab = "raw";
+
+  constructor() {
+    super(...arguments);
+    if (this.args.model.id) {
+      this.loadRawEmail(this.args.model.id);
+    }
+  }
+
+  @action
+  async loadRawEmail(postId) {
+    const result = await Post.loadRawEmail(postId);
+    this.rawEmail = result.raw_email;
+    this.textPart = result.text_part;
+    this.htmlPart = result.html_part;
+  }
+
+  @action
+  displayRaw() {
+    this.tab = "raw";
+  }
+
+  @action
+  displayTextPart() {
+    this.tab = "text_part";
+  }
+
+  @action
+  displayHtmlPart() {
+    this.tab = "html_part";
+  }
+}

app/assets/javascripts/discourse/app/components/reviewable-queued-post.js

@@ -1,9 +1,12 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
-import showModal from "discourse/lib/show-modal";
+import { inject as service } from "@ember/service";
+import RawEmailModal from "discourse/components/modal/raw-email";
 
 export default class ReviewableQueuedPost extends Component {
+  @service modal;
+
   @tracked isCollapsed = false;
   @tracked isLongPost = false;
   @tracked postBodyHeight = 0;
@@ -12,10 +15,11 @@ export default class ReviewableQueuedPost extends Component {
   @action
   showRawEmail(event) {
     event?.preventDefault();
-    showModal("raw-email").set(
+    this.modal.show(RawEmailModal, {
-      "rawEmail",
+      model: {
-      this.args.reviewable.payload.raw_email
+        rawEmail: this.args.reviewable.payload.raw_email,
-    );
+      },
+    });
   }
 
   @action

app/assets/javascripts/discourse/app/controllers/raw-email.js

@@ -1,43 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import Post from "discourse/models/post";
-import { equal } from "@ember/object/computed";
-
-// This controller handles displaying of raw email
-export default Controller.extend(ModalFunctionality, {
-  rawEmail: "",
-  textPart: "",
-  htmlPart: "",
-
-  tab: "raw",
-
-  showRawEmail: equal("tab", "raw"),
-  showTextPart: equal("tab", "text_part"),
-  showHtmlPart: equal("tab", "html_part"),
-
-  onShow() {
-    this.send("displayRaw");
-  },
-
-  loadRawEmail(postId) {
-    return Post.loadRawEmail(postId).then((result) =>
-      this.setProperties({
-        rawEmail: result.raw_email,
-        textPart: result.text_part,
-        htmlPart: result.html_part,
-      })
-    );
-  },
-
-  actions: {
-    displayRaw() {
-      this.set("tab", "raw");
-    },
-    displayTextPart() {
-      this.set("tab", "text_part");
-    },
-    displayHtmlPart() {
-      this.set("tab", "html_part");
-    },
-  },
-});

app/assets/javascripts/discourse/app/routes/topic.js

@@ -18,6 +18,7 @@ import EditTopicTimerModal from "discourse/components/modal/edit-topic-timer";
 import FeatureTopicModal from "discourse/components/modal/feature-topic";
 import FlagModal from "discourse/components/modal/flag";
 import MoveToTopicModal from "discourse/components/modal/move-to-topic";
+import RawEmailModal from "discourse/components/modal/raw-email";
 
 const SCROLL_DELAY = 500;
 
@@ -207,8 +208,7 @@ const TopicRoute = DiscourseRoute.extend({
 
   @action
   showRawEmail(model) {
-    showModal("raw-email", { model });
+    this.modal.show(RawEmailModal, { model });
-    this.controllerFor("raw_email").loadRawEmail(model.get("id"));
   },
 
   @action

app/assets/javascripts/discourse/app/services/modal.js

@@ -20,7 +20,6 @@ const KNOWN_LEGACY_MODALS = [
   "create-invite",
   "grant-badge",
   "group-default-notifications",
-  "raw-email",
   "reject-reason-reviewable",
   "reorder-categories",
   "request-group-membership-form",

app/assets/javascripts/discourse/app/templates/modal/raw-email.hbs

@@ -1,47 +0,0 @@
-<DModalBody @title="raw_email.title" @class="incoming-email-modal">
-  <div class="incoming-email-tabs">
-    <DButton
-      @action={{action "displayRaw"}}
-      @label="post.raw_email.displays.raw.button"
-      @title="post.raw_email.displays.raw.title"
-      class={{if this.showRawEmail "active"}}
-    />
-
-    {{#if this.textPart}}
-      <DButton
-        @action={{action "displayTextPart"}}
-        @label="post.raw_email.displays.text_part.button"
-        @title="post.raw_email.displays.text_part.title"
-        class={{if this.showTextPart "active"}}
-      />
-    {{/if}}
-
-    {{#if this.htmlPart}}
-      <DButton
-        @action={{action "displayHtmlPart"}}
-        @label="post.raw_email.displays.html_part.button"
-        @title="post.raw_email.displays.html_part.title"
-        class={{if this.showHtmlPart "active"}}
-      />
-    {{/if}}
-  </div>
-
-  <div class="incoming-email-content">
-    {{#if this.showRawEmail}}
-      {{#if this.rawEmail}}
-        <Textarea @value={{this.rawEmail}} />
-      {{else}}
-        {{i18n "raw_email.not_available"}}
-      {{/if}}
-    {{/if}}
-    {{#if this.showTextPart}}
-      <Textarea @value={{this.textPart}} />
-    {{/if}}
-    {{#if this.showHtmlPart}}
-      <IframedHtml
-        @html={{this.htmlPart}}
-        @className="incoming-email-html-part"
-      />
-    {{/if}}
-  </div>
-</DModalBody>