DEV: Convert ChooseMessage to gjs (#30408)

app/assets/javascripts/discourse/app/components/choose-message.gjs

@@ -0,0 +1,80 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { isEmpty } from "@ember/utils";
+import { searchForTerm } from "discourse/lib/search";
+import { debounce } from "discourse-common/utils/decorators";
+import { i18n } from "discourse-i18n";
+
+export default class ChooseMessage extends Component {
+  @tracked hasSearched = false;
+  @tracked loading = false;
+  @tracked messages;
+
+  @debounce(300)
+  async debouncedSearch(title) {
+    if (isEmpty(title)) {
+      this.messages = null;
+      this.loading = false;
+      return;
+    }
+
+    const results = await searchForTerm(title, {
+      typeFilter: "private_messages",
+      searchForId: true,
+      restrictToArchetype: "private_message",
+    });
+
+    this.messages = results?.posts
+      ?.mapBy("topic")
+      .filter((topic) => topic.id !== this.args.currentTopicId);
+
+    this.loading = false;
+  }
+
+  @action
+  search(event) {
+    this.hasSearched = true;
+    this.loading = true;
+    this.args.setSelectedTopicId(null);
+    this.debouncedSearch(event.target.value);
+  }
+
+  <template>
+    <div>
+      <label for="choose-message-title">
+        {{i18n "choose_message.title.search"}}
+      </label>
+
+      <input
+        {{on "input" this.search}}
+        type="text"
+        placeholder={{i18n "choose_message.title.placeholder"}}
+        id="choose-message-title"
+      />
+
+      {{#if this.loading}}
+        <p>{{i18n "loading"}}</p>
+      {{else if this.hasSearched}}
+        {{#each this.messages as |message|}}
+          <div class="controls existing-message">
+            <label class="radio">
+              <input
+                {{on "click" (fn @setSelectedTopicId message)}}
+                type="radio"
+                name="choose_message_id"
+              />
+              <span class="message-title">
+                {{message.title}}
+              </span>
+            </label>
+          </div>
+        {{else}}
+          <p>{{i18n "choose_message.none_found"}}</p>
+        {{/each}}
+      {{/if}}
+    </div>
+  </template>
+}

app/assets/javascripts/discourse/app/components/choose-message.hbs

@@ -1,31 +0,0 @@
-<label for="choose-message-title">{{i18n "choose_message.title.search"}}</label>
-
-<TextField
-  @value={{this.messageTitle}}
-  @placeholderKey="choose_message.title.placeholder"
-  @id="choose-message-title"
-/>
-
-{{#if this.loading}}
-  <p>{{i18n "loading"}}</p>
-{{else}}
-  {{#if this.noResults}}
-    <p>{{i18n "choose_message.none_found"}}</p>
-  {{else}}
-    {{#each this.messages as |m|}}
-      <div class="controls existing-message">
-        <label class="radio">
-          <input
-            id="choose-message-{{m.id}}"
-            {{on "click" (fn this.chooseMessage m)}}
-            type="radio"
-            name="choose_message_id"
-          />
-          <span class="message-title">
-            {{m.title}}
-          </span>
-        </label>
-      </div>
-    {{/each}}
-  {{/if}}
-{{/if}}

app/assets/javascripts/discourse/app/components/choose-message.js

@@ -1,66 +0,0 @@
-import Component from "@ember/component";
-import { action, get } from "@ember/object";
-import { next } from "@ember/runloop";
-import { isEmpty } from "@ember/utils";
-import { observes } from "@ember-decorators/object";
-import $ from "jquery";
-import { searchForTerm } from "discourse/lib/search";
-import { debounce } from "discourse-common/utils/decorators";
-
-export default class ChooseMessage extends Component {
-  loading = null;
-  noResults = null;
-  messages = null;
-
-  @observes("messageTitle")
-  messageTitleChanged() {
-    this.setProperties({
-      loading: true,
-      noResults: true,
-      selectedTopicId: null,
-    });
-    this.search(this.messageTitle);
-  }
-
-  @observes("messages")
-  messagesChanged() {
-    const messages = this.messages;
-    if (messages) {
-      this.set("noResults", messages.length === 0);
-    }
-    this.set("loading", false);
-  }
-
-  @debounce(300)
-  search(title) {
-    if (isEmpty(title)) {
-      this.setProperties({ messages: null, loading: false });
-      return;
-    }
-
-    searchForTerm(title, {
-      typeFilter: "private_messages",
-      searchForId: true,
-      restrictToArchetype: "private_message",
-    }).then((results) => {
-      if (results?.posts?.length) {
-        this.set(
-          "messages",
-          results.posts
-            .mapBy("topic")
-            .filter((t) => t.get("id") !== this.currentTopicId)
-        );
-      } else {
-        this.setProperties({ messages: null, loading: false });
-      }
-    });
-  }
-
-  @action
-  chooseMessage(message, event) {
-    event?.preventDefault();
-    const messageId = get(message, "id");
-    this.set("selectedTopicId", messageId);
-    next(() => $(`#choose-message-${messageId}`).prop("checked", "true"));
-  }
-}

app/assets/javascripts/discourse/app/components/modal/move-to-topic.hbs

@@ -70,7 +70,7 @@
         <form>
           <ChooseMessage
             @currentTopicId={{@model.topic.id}}
-            @selectedTopicId={{this.selectedTopicId}}
+            @setSelectedTopicId={{fn (mut this.selectedTopicId)}}
           />
 
           <label>{{i18n "topic.move_to_new_message.participants"}}</label>