FEATURE: Use new topic-chooser for invite modal (#15884)

The old choose-topic component did not have the same style as the rest
of the create invite modal and was not very suitable to use in the modal
because it introduced the search results in modal's body.

The new topic-chooser is built using select-kit and provides a more
polished user experience.

app/assets/javascripts/discourse/app/controllers/create-invite.js

@@ -18,6 +18,7 @@ export default Controller.extend(
   bufferedProperty("invite"),
   {
     allGroups: null,
+    topics: null,
 
     flashText: null,
     flashClass: null,
@@ -48,6 +49,7 @@ export default Controller.extend(
       });
 
       this.setProperties({
+        topics: [],
         flashText: null,
         flashClass: null,
         flashLink: false,
@@ -72,7 +74,7 @@ export default Controller.extend(
     },
 
     setInvite(invite) {
-      this.set("invite", invite);
+      this.setProperties({ invite, topics: invite.topics });
     },
 
     save(opts) {
@@ -201,5 +203,11 @@ export default Controller.extend(
         this.set("buffered.email", result[0].email[0]);
       });
     },
+
+    @action
+    onChangeTopic(topicId, topic) {
+      this.set("topics", [topic]);
+      this.set("buffered.topicId", topicId);
+    },
   }
 );

app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs

@@ -85,12 +85,14 @@
 
     {{#if currentUser.staff}}
       <div class="input-group invite-to-topic">
-        {{choose-topic
+        <label for="invite-topic">{{d-icon "hand-point-right"}}{{i18n "user.invited.invite.invite_to_topic"}}</label>
-          selectedTopicId=buffered.topicId
+        {{topic-chooser
-          topicTitle=buffered.topicTitle
+          value=buffered.topicId
-          additionalFilters="status:public"
+          content=topics
-          labelIcon="hand-point-right"
+          onChange=(action "onChangeTopic")
-          label="user.invited.invite.invite_to_topic"
+          options=(hash
+            additionalFilters="status:public"
+          )
         }}
       </div>
     {{else if buffered.topicTitle}}

app/assets/javascripts/select-kit/addon/components/topic-chooser.js

@@ -0,0 +1,45 @@
+import { isEmpty } from "@ember/utils";
+import { searchForTerm } from "discourse/lib/search";
+import ComboBoxComponent from "select-kit/components/combo-box";
+
+export default ComboBoxComponent.extend({
+  pluginApiIdentifiers: ["topic-chooser"],
+  classNames: ["topic-chooser"],
+
+  nameProperty: "fancy_title",
+  labelProperty: "title",
+  titleProperty: "title",
+
+  selectKitOptions: {
+    clearable: true,
+    filterable: true,
+    filterPlaceholder: "choose_topic.title.placeholder",
+    additionalFilters: "",
+  },
+
+  modifyComponentForRow() {
+    return "topic-row";
+  },
+
+  search(filter) {
+    if (isEmpty(filter) && isEmpty(this.selectKit.options.additionalFilters)) {
+      return [];
+    }
+
+    const searchParams = {};
+    if (!isEmpty(filter)) {
+      searchParams.typeFilter = "topic";
+      searchParams.restrictToArchetype = "regular";
+      searchParams.searchForId = true;
+    }
+
+    return searchForTerm(
+      `${filter} ${this.selectKit.options.additionalFilters}`,
+      searchParams
+    ).then((results) => {
+      if (results?.posts?.length > 0) {
+        return results.posts.mapBy("topic");
+      }
+    });
+  },
+});

app/assets/javascripts/select-kit/addon/components/topic-row.js

@@ -0,0 +1,7 @@
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/topic-row";
+
+export default SelectKitRowComponent.extend({
+  layout,
+  classNames: ["topic-row"],
+});

app/assets/javascripts/select-kit/addon/templates/components/topic-row.hbs

@@ -0,0 +1,9 @@
+{{topic-status topic=item disableActions=true}}
+<div class="topic-title">{{replace-emoji item.fancy_title}}</div>
+<div class="topic-categories">
+  {{bound-category-link item.category
+    recursive=true
+    hideParent=true
+    link=false
+  }}
+</div>

app/assets/stylesheets/common/base/share_link.scss

@@ -187,6 +187,7 @@
     textarea#invite-message,
     &.invite-to-topic input[type="text"],
     .group-chooser,
+    .topic-chooser,
     .user-chooser,
     .future-date-input-selector,
     .future-date-input-date-picker,

app/assets/stylesheets/common/select-kit/_index.scss

@@ -23,5 +23,6 @@
 @import "tag-chooser";
 @import "tag-drop";
 @import "toolbar-popup-menu-options";
+@import "topic-chooser";
 @import "topic-notifications-button";
 @import "user-row";

app/assets/stylesheets/common/select-kit/topic-chooser.scss

@@ -0,0 +1,9 @@
+.select-kit {
+  &.combo-box {
+    &.topic-chooser {
+      .select-kit-row {
+        display: initial;
+      }
+    }
+  }
+}