DEV: Convert delete-topic-confirm modal to component-based API (#22813)

<img width="677" alt="Screenshot 2023-07-26 at 4 19 52 PM" src="https://github.com/discourse/discourse/assets/50783505/5b969d38-0283-4217-9f70-de3561f82dd5">

app/assets/javascripts/discourse/app/components/modal/delete-topic-confirm.hbs

@@ -0,0 +1,32 @@
+<DModal
+  @title={{i18n "topic.actions.delete"}}
+  @closeModal={{@closeModal}}
+  class="delete-topic-confirm-modal"
+  @flash={{this.flash}}
+>
+  <:body>
+    <p>
+      {{i18n
+        "post.controls.delete_topic_confirm_modal"
+        count=this.siteSettings.min_topic_views_for_delete_confirm
+      }}
+    </p>
+  </:body>
+  <:footer>
+    <DButton
+      @action={{this.deleteTopic}}
+      @disabled={{this.deletingTopic}}
+      @label={{if
+        this.deletingTopic
+        "deleting"
+        "post.controls.delete_topic_confirm_modal_yes"
+      }}
+      class="btn-danger"
+    />
+    <DButton
+      @action={{@closeModal}}
+      @label="post.controls.delete_topic_confirm_modal_no"
+      class="btn-primary"
+    />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/delete-topic-confirm.js

@@ -0,0 +1,27 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import I18n from "I18n";
+
+// Modal that displays confirmation text when user deletes a topic
+// The modal will display only if the topic exceeds a certain amount of views
+export default class DeleteTopicConfirm extends Component {
+  @service currentUser;
+  @service siteSettings;
+
+  @tracked deletingTopic = false;
+  @tracked flash;
+
+  @action
+  async deleteTopic() {
+    try {
+      this.deletingTopic = true;
+      await this.args.model.topic.destroy(this.currentUser);
+      this.args.closeModal();
+    } catch {
+      this.flash = I18n.t("post.controls.delete_topic_error");
+      this.deletingTopic = false;
+    }
+  }
+}

app/assets/javascripts/discourse/app/controllers/delete-topic-confirm.js

@@ -1,37 +0,0 @@
-import Controller from "@ember/controller";
-import I18n from "I18n";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { action } from "@ember/object";
-import discourseComputed from "discourse-common/utils/decorators";
-
-// Modal that displays confirmation text when user deletes a topic
-// The modal will display only if the topic exceeds a certain amount of views
-export default Controller.extend(ModalFunctionality, {
-  deletingTopic: false,
-
-  @discourseComputed("deletingTopic")
-  buttonTitle(deletingTopic) {
-    return deletingTopic
-      ? I18n.t("deleting")
-      : I18n.t("post.controls.delete_topic_confirm_modal_yes");
-  },
-
-  onShow() {
-    this.set("deletingTopic", false);
-  },
-
-  @action
-  deleteTopic() {
-    this.set("deletingTopic", true);
-
-    this.model
-      .destroy(this.currentUser)
-      .then(() => this.send("closeModal"))
-      .catch(() => {
-        this.flash(I18n.t("post.controls.delete_topic_error"), "error");
-        this.set("deletingTopic", false);
-      });
-
-    return false;
-  },
-});

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

@@ -35,6 +35,7 @@ import { inject as service } from "@ember/service";
 import showModal from "discourse/lib/show-modal";
 import { spinnerHTML } from "discourse/helpers/loading-spinner";
 import { BookmarkFormData } from "discourse/lib/bookmark";
+import DeleteTopicConfirmModal from "discourse/components/modal/delete-topic-confirm";
 
 let customPostMessageCallbacks = {};
 
@@ -1569,10 +1570,7 @@ export default Controller.extend(bufferedProperty("model"), {
   },
 
   deleteTopicModal() {
-    showModal("delete-topic-confirm", {
+    this.modal.show(DeleteTopicConfirmModal, { model: { topic: this.model } });
-      model: this.model,
-      title: "topic.actions.delete",
-    });
   },
 
   retryOnRateLimit(times, promise, topicId) {

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

@@ -24,7 +24,6 @@ const KNOWN_LEGACY_MODALS = [
   "create-account",
   "create-invite-bulk",
   "create-invite",
-  "delete-topic-confirm",
   "delete-topic-disallowed",
   "download-calendar",
   "edit-slow-mode",

app/assets/javascripts/discourse/app/templates/modal/delete-topic-confirm.hbs

@@ -1,20 +0,0 @@
-<DModalBody>
-  <p>{{i18n
-      "post.controls.delete_topic_confirm_modal"
-      count=this.siteSettings.min_topic_views_for_delete_confirm
-    }}</p>
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @action={{action "deleteTopic"}}
-    @disabled={{this.deletingTopic}}
-    @translatedLabel={{this.buttonTitle}}
-    @class="btn-danger"
-  />
-  <DButton
-    @action={{route-action "closeModal"}}
-    @label="post.controls.delete_topic_confirm_modal_no"
-    @class="btn-primary"
-  />
-</div>