DEV: Convert request-group-membership-form to new modal api (#23600)

app/assets/javascripts/discourse/app/components/group-membership-button.js

@@ -4,11 +4,14 @@ import cookie from "discourse/lib/cookie";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { inject as service } from "@ember/service";
-import showModal from "discourse/lib/show-modal";
+import RequestGroupMembershipForm from "./modal/request-group-membership-form";
 
 export default Component.extend({
   classNames: ["group-membership-button"],
+  appEvents: service(),
+  currentUser: service(),
   dialog: service(),
+  modal: service(),
 
   @discourseComputed("model.public_admission", "userIsGroupUser")
   canJoinGroup(publicAdmission, userIsGroupUser) {
@@ -84,8 +87,10 @@ export default Component.extend({
 
     showRequestMembershipForm() {
       if (this.currentUser) {
-        showModal("request-group-membership-form", {
-          model: this.model,
+        this.modal.show(RequestGroupMembershipForm, {
+          model: {
+            group: this.model,
+          },
         });
       } else {
         this._showLoginModal();

app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.hbs

@@ -1,5 +1,9 @@
-<form class="request-group-membership-form">
-  <DModalBody @rawTitle={{this.title}}>
+<DModal
+  @title={{this.title}}
+  @closeModal={{@closeModal}}
+  class="request-group-membership-form"
+>
+  <:body>
     <div class="control-group">
       <label>
         {{i18n "groups.membership_request.reason"}}
@@ -7,17 +11,17 @@
 
       <ExpandingTextArea @value={{this.reason}} @maxlength="5000" />
     </div>
-  </DModalBody>
+  </:body>
 
-  <div class="modal-footer">
+  <:footer>
     <DButton
-      @disabled={{this.disableSubmit}}
+      @action={{this.requestMember}}
       @label="groups.membership_request.submit"
-      @action={{action "requestMember"}}
+      @disabled={{this.disableSubmit}}
       class="btn-primary"
     />
 
-    <DModalCancel @close={{route-action "closeModal"}} />
+    <DModalCancel @close={{@closeModal}} />
     <ConditionalLoadingSpinner @size="small" @condition={{this.loading}} />
-  </div>
-</form>
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/request-group-membership-form.js

@@ -0,0 +1,39 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import DiscourseURL from "discourse/lib/url";
+import I18n from "I18n";
+import { isEmpty } from "@ember/utils";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+
+export default class RequestGroupMembershipForm extends Component {
+  @tracked loading = false;
+
+  get reason() {
+    return this.args.model.group.membership_request_template;
+  }
+
+  get title() {
+    return I18n.t("groups.membership_request.title", {
+      group_name: this.args.model.group.name,
+    });
+  }
+
+  get disableSubmit() {
+    return this.loading || isEmpty(this.reason);
+  }
+
+  @action
+  async requestMember() {
+    this.loading = true;
+
+    try {
+      const result = await this.args.model.group.requestMembership(this.reason);
+      DiscourseURL.routeTo(result.relative_url);
+    } catch (e) {
+      popupAjaxError(e);
+    } finally {
+      this.loading = false;
+    }
+  }
+}

app/assets/javascripts/discourse/app/controllers/request-group-membership-form.js

@@ -1,43 +0,0 @@
-import Controller from "@ember/controller";
-import DiscourseURL from "discourse/lib/url";
-import I18n from "I18n";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { alias } from "@ember/object/computed";
-import discourseComputed from "discourse-common/utils/decorators";
-import { isEmpty } from "@ember/utils";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-
-export default Controller.extend(ModalFunctionality, {
-  loading: false,
-  reason: alias("model.membership_request_template"),
-
-  @discourseComputed("model.name")
-  title(groupName) {
-    return I18n.t("groups.membership_request.title", { group_name: groupName });
-  },
-
-  @discourseComputed("loading", "reason")
-  disableSubmit(loading, reason) {
-    return loading || isEmpty(reason);
-  },
-
-  actions: {
-    requestMember() {
-      if (this.currentUser) {
-        this.set("loading", true);
-
-        this.model
-          .requestMembership(this.reason)
-          .then((result) => {
-            DiscourseURL.routeTo(result.relative_url);
-          })
-          .catch(popupAjaxError)
-          .finally(() => {
-            this.set("loading", false);
-          });
-      } else {
-        this._showLoginModal();
-      }
-    },
-  },
-});

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

@@ -22,7 +22,6 @@ const KNOWN_LEGACY_MODALS = [
   "group-default-notifications",
   "reject-reason-reviewable",
   "reorder-categories",
-  "request-group-membership-form",
 ];
 
 const LEGACY_OPTS = new Set([

app/assets/stylesheets/common/base/request-group-membership-form.scss

@@ -3,7 +3,3 @@
     font-weight: bold;
   }
 }
-
-.group-add-membership-request-template {
-  width: 98%;
-}