DEV: Convert group-add-members modal to component-based API (#22368)

app/assets/javascripts/discourse/app/components/modal/group-add-members.hbs

@@ -0,0 +1,60 @@
+<DModal
+  @title={{this.title}}
+  @closeModal={{@closeModal}}
+  class="group-add-members-modal"
+  @flash={{this.flash}}
+>
+  <:body>
+    <form class="form-vertical group-add-members">
+      <p>{{i18n "groups.add_members.description"}}</p>
+      <div class="input-group">
+        <EmailGroupUserChooser
+          @value={{this.usernamesAndEmails}}
+          @onChange={{this.setUsernamesAndEmails}}
+          @options={{hash
+            allowEmails=this.currentUser.can_invite_to_forum
+            filterPlaceholder=(if
+              this.currentUser.can_invite_to_forum
+              "groups.add_members.usernames_or_emails_placeholder"
+              "groups.add_members.usernames_placeholder"
+            )
+          }}
+        />
+      </div>
+
+      {{#if @model.can_admin_group}}
+        <div class="input-group">
+          <label>
+            <Input
+              id="set-owner"
+              @type="checkbox"
+              @checked={{this.setOwner}}
+              disabled={{this.emails}}
+            />
+            {{i18n "groups.add_members.set_owner"}}
+          </label>
+        </div>
+      {{/if}}
+
+      <div class="input-group">
+        <label>
+          <Input
+            @type="checkbox"
+            @checked={{this.notifyUsers}}
+            disabled={{and (not this.usernames) this.emails}}
+          />
+          {{i18n "groups.add_members.notify_users"}}
+        </label>
+      </div>
+    </form>
+  </:body>
+  <:footer>
+    <DButton
+      @action={{this.addMembers}}
+      class="add btn-primary"
+      @icon="plus"
+      @disabled={{or this.loading (not this.usernamesAndEmails)}}
+      @label="groups.add"
+    />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/group-add-members.js

@@ -0,0 +1,69 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { isEmpty } from "@ember/utils";
+import { tracked } from "@glimmer/tracking";
+import { emailValid } from "discourse/lib/utilities";
+import I18n from "I18n";
+import { inject as service } from "@ember/service";
+
+export default class GroupAddMembers extends Component {
+  @service currentUser;
+  @service router;
+
+  @tracked loading = false;
+  @tracked setOwner = false;
+  @tracked notifyUsers = false;
+  @tracked usernamesAndEmails = [];
+  @tracked flash;
+
+  get title() {
+    return I18n.t("groups.add_members.title", {
+      group_name: this.args.model.fullName || this.args.model.name,
+    });
+  }
+
+  get usernames() {
+    return this.usernamesAndEmails.reject(emailValid).join(",");
+  }
+
+  get emails() {
+    return this.usernamesAndEmails.filter(emailValid).join(",");
+  }
+
+  @action
+  setUsernamesAndEmails(usernamesAndEmails) {
+    this.usernamesAndEmails = usernamesAndEmails;
+    if (this.emails) {
+      if (!this.usernames) {
+        this.notifyUsers = false;
+      }
+      this.setOwner = false;
+    }
+  }
+
+  @action
+  addMembers() {
+    if (isEmpty(this.usernamesAndEmails)) {
+      return;
+    }
+    this.loading = true;
+    const promise = this.setOwner
+      ? this.args.model.addOwners(this.usernames, true, this.notifyUsers)
+      : this.args.model.addMembers(
+          this.usernames,
+          true,
+          this.notifyUsers,
+          this.emails
+        );
+
+    promise
+      .then(() => {
+        this.router.transitionTo("group.members", this.args.model.name, {
+          queryParams: { ...(this.usernames && { filter: this.usernames }) },
+        });
+        this.args.closeModal();
+      })
+      .catch((e) => (this.flash = e))
+      .finally(() => (this.loading = false));
+  }
+}

app/assets/javascripts/discourse/app/controllers/group-add-members.js

@@ -1,82 +0,0 @@
-import Controller from "@ember/controller";
-import { action } from "@ember/object";
-import { isEmpty } from "@ember/utils";
-import discourseComputed from "discourse-common/utils/decorators";
-import { flashAjaxError } from "discourse/lib/ajax-error";
-import { emailValid } from "discourse/lib/utilities";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import I18n from "I18n";
-
-export default Controller.extend(ModalFunctionality, {
-  loading: false,
-
-  usernamesAndEmails: null,
-  setOwner: false,
-  notifyUsers: false,
-
-  onShow() {
-    this.setProperties({
-      loading: false,
-      setOwner: false,
-      notifyUsers: false,
-      usernamesAndEmails: [],
-    });
-  },
-
-  @discourseComputed("model.name", "model.full_name")
-  rawTitle(name, fullName) {
-    return I18n.t("groups.add_members.title", { group_name: fullName || name });
-  },
-
-  @discourseComputed("usernamesAndEmails.[]")
-  usernames(usernamesAndEmails) {
-    return usernamesAndEmails.reject(emailValid).join(",");
-  },
-
-  @discourseComputed("usernamesAndEmails.[]")
-  emails(usernamesAndEmails) {
-    return usernamesAndEmails.filter(emailValid).join(",");
-  },
-
-  @action
-  setUsernamesAndEmails(usernamesAndEmails) {
-    this.set("usernamesAndEmails", usernamesAndEmails);
-
-    if (this.emails) {
-      if (!this.usernames) {
-        this.set("notifyUsers", false);
-      }
-
-      this.set("setOwner", false);
-    }
-  },
-
-  @action
-  addMembers() {
-    if (isEmpty(this.usernamesAndEmails)) {
-      return;
-    }
-
-    this.set("loading", true);
-
-    const promise = this.setOwner
-      ? this.model.addOwners(this.usernames, true, this.notifyUsers)
-      : this.model.addMembers(
-          this.usernames,
-          true,
-          this.notifyUsers,
-          this.emails
-        );
-
-    promise
-      .then(() => {
-        this.transitionToRoute("group.members", this.get("model.name"), {
-          queryParams: this.usernames ? { filter: this.usernames } : {},
-        });
-
-        this.send("closeModal");
-      })
-      .catch(flashAjaxError(this))
-      .finally(() => this.set("loading", false));
-  },
-});

app/assets/javascripts/discourse/app/routes/group-index.js

@@ -2,8 +2,12 @@ import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "I18n";
 import { action } from "@ember/object";
 import showModal from "discourse/lib/show-modal";
+import { inject as service } from "@ember/service";
+import GroupAddMembersModal from "discourse/components/modal/group-add-members";
 
 export default DiscourseRoute.extend({
+  modal: service(),
+
   titleToken() {
     return I18n.t("groups.members.title");
   },
@@ -25,7 +29,7 @@ export default DiscourseRoute.extend({
 
   @action
   showAddMembersModal() {
-    showModal("group-add-members", { model: this.modelFor("group") });
+    this.modal.show(GroupAddMembersModal, { model: this.modelFor("group") });
   },
 
   @action

app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs

@@ -1,55 +0,0 @@
-<DModalBody @rawTitle={{this.rawTitle}}>
-  <form class="form-vertical group-add-members">
-    <p>{{i18n "groups.add_members.description"}}</p>
-
-    <div class="input-group">
-      <EmailGroupUserChooser
-        @value={{this.usernamesAndEmails}}
-        @onChange={{action "setUsernamesAndEmails"}}
-        @options={{hash
-          allowEmails=this.currentUser.can_invite_to_forum
-          filterPlaceholder=(if
-            this.currentUser.can_invite_to_forum
-            "groups.add_members.usernames_or_emails_placeholder"
-            "groups.add_members.usernames_placeholder"
-          )
-        }}
-      />
-    </div>
-
-    {{#if this.model.can_admin_group}}
-      <div class="input-group">
-        <label>
-          <Input
-            id="set-owner"
-            @type="checkbox"
-            @checked={{this.setOwner}}
-            disabled={{this.emails}}
-          />
-          {{i18n "groups.add_members.set_owner"}}
-        </label>
-      </div>
-    {{/if}}
-
-    <div class="input-group">
-      <label>
-        <Input
-          @type="checkbox"
-          @checked={{this.notifyUsers}}
-          disabled={{and (not this.usernames) this.emails}}
-        />
-        {{i18n "groups.add_members.notify_users"}}
-      </label>
-    </div>
-  </form>
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @action={{action "addMembers"}}
-    @class="add btn-primary"
-    @icon="plus"
-    @disabled={{or this.loading (not this.usernamesAndEmails)}}
-    @label="groups.add"
-  />
-</div>