DEV: Convert `feature-topic-on-profile` modal to component-based API (#23275)

# Before
<img width="738" alt="Screenshot 2023-08-25 at 2 04 31 PM" src="https://github.com/discourse/discourse/assets/50783505/c0778da2-d062-48d9-93e8-4b481190fadc">


# After
<img width="750" alt="Screenshot 2023-08-25 at 2 04 34 PM" src="https://github.com/discourse/discourse/assets/50783505/07aa2bec-e282-424e-b87d-48f5104eb534">

app/assets/javascripts/discourse/app/components/modal/feature-topic-on-profile.hbs

@@ -0,0 +1,26 @@
+<DModal
+  @closeModal={{@closeModal}}
+  class="feature-topic-on-profile choose-topic-modal"
+  id="choosing-topic"
+  @title={{i18n "user.feature_topic_on_profile.title"}}
+>
+  <:body>
+    <ChooseTopic
+      @currentTopicId={{@model.user.featured_topic.id}}
+      @selectedTopicId={{this.newFeaturedTopicId}}
+      @additionalFilters="status:public"
+      @label="user.feature_topic_on_profile.search_label"
+      @topicChangedCallback={{this.newTopicSelected}}
+      @loadOnInit={{true}}
+    />
+  </:body>
+  <:footer>
+    <DButton
+      @action={{this.save}}
+      class="btn-primary save-featured-topic-on-profile"
+      @disabled={{this.noTopicSelected}}
+      @label="user.feature_topic_on_profile.save"
+    />
+    <DButton @action={{@closeModal}} @label="cancel" class="btn-flat" />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/feature-topic-on-profile.js

@@ -0,0 +1,37 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+
+export default class FeatureTopicOnProfile extends Component {
+  @tracked newFeaturedTopic = null;
+  @tracked saving = false;
+
+  get noTopicSelected() {
+    return !this.newFeaturedTopic;
+  }
+
+  @action
+  async save() {
+    try {
+      this.saving = true;
+      await ajax(`/u/${this.args.model.user.username}/feature-topic`, {
+        type: "PUT",
+        data: { topic_id: this.newFeaturedTopic.id },
+      });
+
+      this.args.model.setFeaturedTopic(this.newFeaturedTopic);
+      this.args.closeModal();
+    } catch (error) {
+      popupAjaxError(error);
+    } finally {
+      this.saving = false;
+    }
+  }
+
+  @action
+  newTopicSelected(topic) {
+    this.newFeaturedTopic = topic;
+  }
+}

app/assets/javascripts/discourse/app/controllers/feature-topic-on-profile.js

@@ -1,37 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { ajax } from "discourse/lib/ajax";
-import { none } from "@ember/object/computed";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-
-export default Controller.extend(ModalFunctionality, {
-  newFeaturedTopic: null,
-  saving: false,
-  noTopicSelected: none("newFeaturedTopic"),
-
-  onClose() {
-    this.set("newFeaturedTopic", null);
-  },
-
-  onShow() {
-    this.set("modal.modalClass", "choose-topic-modal");
-  },
-
-  actions: {
-    save() {
-      return ajax(`/u/${this.model.username}/feature-topic`, {
-        type: "PUT",
-        data: { topic_id: this.newFeaturedTopic.id },
-      })
-        .then(() => {
-          this.model.set("featured_topic", this.newFeaturedTopic);
-          this.send("closeModal");
-        })
-        .catch(popupAjaxError);
-    },
-
-    newTopicSelected(topic) {
-      this.set("newFeaturedTopic", topic);
-    },
-  },
-});

app/assets/javascripts/discourse/app/controllers/preferences/profile.js

@@ -1,5 +1,5 @@
 import Controller from "@ember/controller";
-import EmberObject from "@ember/object";
+import EmberObject, { action } from "@ember/object";
 import I18n from "I18n";
 import { ajax } from "discourse/lib/ajax";
 import { cookAsync } from "discourse/lib/text";
@@ -7,11 +7,12 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { isEmpty } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { readOnly } from "@ember/object/computed";
-import showModal from "discourse/lib/show-modal";
 import { inject as service } from "@ember/service";
+import FeatureTopicOnProfileModal from "discourse/components/modal/feature-topic-on-profile";
 
 export default Controller.extend({
   dialog: service(),
+  modal: service(),
   subpageTitle: I18n.t("user.preferences_nav.profile"),
   init() {
     this._super(...arguments);
@@ -69,17 +70,18 @@ export default Controller.extend({
     "model.can_upload_user_card_background"
   ),
 
-  actions: {
+  @action
-    showFeaturedTopicModal() {
+  async showFeaturedTopicModal() {
-      const modal = showModal("feature-topic-on-profile", {
+    await this.modal.show(FeatureTopicOnProfileModal, {
-        model: this.model,
+      model: {
-        title: "user.feature_topic_on_profile.title",
+        user: this.model,
-      });
+        setFeaturedTopic: (v) => this.set("model.featured_topic", v),
-      modal.set("onClose", () => {
+      },
-        document.querySelector(".feature-topic-on-profile-btn")?.focus();
+    });
-      });
+    document.querySelector(".feature-topic-on-profile-btn")?.focus();
-    },
+  },
 
+  actions: {
     clearFeaturedTopicFromProfile() {
       this.dialog.yesNoConfirm({
         message: I18n.t("user.feature_topic_on_profile.clear.warning"),

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

@@ -18,7 +18,6 @@ const KNOWN_LEGACY_MODALS = [
   "create-account",
   "create-invite-bulk",
   "create-invite",
-  "feature-topic-on-profile",
   "feature-topic",
   "flag",
   "grant-badge",

app/assets/javascripts/discourse/app/templates/modal/feature-topic-on-profile.hbs

@@ -1,24 +0,0 @@
-<DModalBody @class="feature-topic-on-profile" @id="choosing-topic">
-  <ChooseTopic
-    @currentTopicId={{this.model.featured_topic.id}}
-    @selectedTopicId={{this.newFeaturedTopicId}}
-    @additionalFilters="status:public"
-    @label="user.feature_topic_on_profile.search_label"
-    @topicChangedCallback={{action "newTopicSelected"}}
-    @loadOnInit={{true}}
-  />
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @action={{action "save"}}
-    @class="btn-primary save-featured-topic-on-profile"
-    @disabled={{this.noTopicSelected}}
-    @label="user.feature_topic_on_profile.save"
-  />
-  <DButton
-    @action={{route-action "closeModal"}}
-    @label="cancel"
-    @class="btn-flat"
-  />
-</div>