DEV: minor choose topic refactoring (#15233)

* DEV: minor choose topic refactoring

- prevents category to be clickable to make clicking topics easier
- drops jQuery
- uses @action
- uses ? operator where possible
- drops un-needed next/schedule usage

* uses topic-status component and prevents pinned icon to be focusable

* Update app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

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

@@ -1,8 +1,8 @@
 import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import Component from "@ember/component";
+import { action } from "@ember/object";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { isEmpty } from "@ember/utils";
-import { next, schedule } from "@ember/runloop";
 import { searchForTerm } from "discourse/lib/search";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 
@@ -26,7 +26,7 @@ export default Component.extend({
 
     if (this.loadOnInit && !isEmpty(this.additionalFilters)) {
       searchForTerm(this.additionalFilters, {}).then((results) => {
-        if (results && results.posts && results.posts.length > 0) {
+        if (results?.posts?.length > 0) {
           this.set(
             "topics",
             results.posts
@@ -42,18 +42,18 @@ export default Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
-    schedule("afterRender", () => {
+
-      $("#choose-topic-title").keydown((e) => {
+    document
-        if (e.key === "Enter") {
+      .getElementById("choose-topic-title")
-          return false;
+      .addEventListener("keydown", this._handleEnter);
-        }
-      });
-    });
   },
 
   willDestroyElement() {
     this._super(...arguments);
-    $("#choose-topic-title").off("keydown");
+
+    document
+      .getElementById("choose-topic-title")
+      .removeEventListener("keydown", this._handleEnter);
   },
 
   @observes("topicTitle")
@@ -102,7 +102,7 @@ export default Component.extend({
 
     const currentTopicId = this.currentTopicId;
     const titleWithFilters = `${title} ${this.additionalFilters}`;
-    let searchParams = {};
+    const searchParams = {};
 
     if (!isEmpty(title)) {
       searchParams.typeFilter = "topic";
@@ -116,7 +116,7 @@ export default Component.extend({
       if (title !== this.topicTitle) {
         return;
       }
-      if (results && results.posts && results.posts.length > 0) {
+      if (results?.posts?.length > 0) {
         this.set(
           "topics",
           results.posts.mapBy("topic").filter((t) => t.id !== currentTopicId)
@@ -130,15 +130,18 @@ export default Component.extend({
     });
   },
 
-  actions: {
+  @action
   chooseTopic(topic) {
     this.set("selectedTopicId", topic.id);
-      next(() => {
+
-        document.getElementById(`choose-topic-${topic.id}`).checked = true;
-      });
     if (this.topicChangedCallback) {
       this.topicChangedCallback(topic);
     }
   },
+
+  _handleEnter(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
   },
 });

app/assets/javascripts/discourse/app/components/topic-status.js

@@ -4,6 +4,8 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
 
 export default Component.extend({
+  disableActions: false,
+
   classNames: ["topic-statuses"],
 
   click(e) {

app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs

@@ -1,8 +1,15 @@
 <label for="choose-topic-title">
-  {{#if labelIcon}}{{d-icon labelIcon}}{{/if}}{{i18n labelText}}
+  {{#if labelIcon}}
+    {{d-icon labelIcon}}
+  {{/if}}
+  <span>{{i18n labelText}}</span>
 </label>
 
-{{text-field value=topicTitle placeholderKey="choose_topic.title.placeholder" id="choose-topic-title"}}
+{{text-field
+  value=topicTitle
+  placeholderKey="choose_topic.title.placeholder"
+  id="choose-topic-title"
+}}
 
 {{#if loading}}
   <p>{{i18n "loading"}}</p>
@@ -13,13 +20,23 @@
     {{#each topics as |t|}}
       <div class="controls existing-topic">
         <label class="radio">
-          <input id="choose-topic-{{t.id}}" {{action "chooseTopic" t}} type="radio" name="choose_topic_id">
+          {{input
-          {{raw "topic-status" topic=t}}
+            id=(concat "choose-topic-" t.id)
+            checked=(eq t.id selectedTopicId)
+            click=(action "chooseTopic" t)
+            type="radio"
+            name="choose_topic_id"
+          }}
+          {{topic-status topic=t disableActions=true}}
           <span class="topic-title">
             {{replace-emoji t.fancy_title}}
           </span>
           <span class="topic-categories">
-            {{bound-category-link t.category recursive=true hideParent=true}}
+            {{bound-category-link t.category
+              recursive=true
+              hideParent=true
+              link=false
+            }}
           </span>
         </label>
       </div>