diff --git a/app/assets/javascripts/discourse/app/components/group-manage-save-button.hbs b/app/assets/javascripts/discourse/app/components/group-manage-save-button.hbs
index c726861637d..7e249bd3640 100644
--- a/app/assets/javascripts/discourse/app/components/group-manage-save-button.hbs
+++ b/app/assets/javascripts/discourse/app/components/group-manage-save-button.hbs
@@ -7,7 +7,7 @@
 {{/if}}
 <div class="control-group buttons group-manage-save-button">
   <DButton
-    @action={{action "save"}}
+    @action={{this.save}}
     @disabled={{or this.disabled this.saving}}
     @class="btn btn-primary group-manage-save"
     @translatedLabel={{this.savingText}}
diff --git a/app/assets/javascripts/discourse/app/components/group-manage-save-button.js b/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
index 2b3a55e7779..606ed6402cf 100644
--- a/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
+++ b/app/assets/javascripts/discourse/app/components/group-manage-save-button.js
@@ -3,10 +3,13 @@ import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { popupAutomaticMembershipAlert } from "discourse/controllers/groups-new";
-import showModal from "discourse/lib/show-modal";
 import { or } from "@ember/object/computed";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import GroupDefaultNotificationsModal from "discourse/components/modal/group-default-notifications";
 
 export default Component.extend({
+  modal: service(),
   saving: null,
   disabled: false,
   updateExistingUsers: null,
@@ -38,53 +41,61 @@ export default Component.extend({
     }
   },
 
-  actions: {
-    save() {
-      if (this.beforeSave) {
-        this.beforeSave();
-      }
+  @action
+  setUpdateExistingUsers(value) {
+    this.updateExistingUsers = value;
+  },
 
-      this.set("saving", true);
-      const group = this.model;
+  @action
+  save() {
+    if (this.beforeSave) {
+      this.beforeSave();
+    }
 
-      popupAutomaticMembershipAlert(
-        group.id,
-        group.automatic_membership_email_domains
-      );
+    this.set("saving", true);
+    const group = this.model;
 
-      const opts = {};
-      if (this.updateExistingUsers !== null) {
-        opts.update_existing_users = this.updateExistingUsers;
-      }
+    popupAutomaticMembershipAlert(
+      group.id,
+      group.automatic_membership_email_domains
+    );
 
-      return group
-        .save(opts)
-        .then(() => {
-          this.setProperties({
-            saved: true,
-            updateExistingUsers: null,
-          });
+    const opts = {};
+    if (this.updateExistingUsers !== null) {
+      opts.update_existing_users = this.updateExistingUsers;
+    }
 
-          if (this.afterSave) {
-            this.afterSave();
-          }
-        })
-        .catch((error) => {
-          const json = error.jqXHR.responseJSON;
-          if (error.jqXHR.status === 422 && json.user_count) {
-            const controller = showModal("group-default-notifications", {
-              model: { count: json.user_count },
-            });
+    return group
+      .save(opts)
+      .then(() => {
+        this.setProperties({
+          saved: true,
+          updateExistingUsers: null,
+        });
 
-            controller.set("onClose", () => {
-              this.updateExistingUsers = controller.updateExistingUsers;
-              this.send("save");
-            });
-          } else {
-            popupAjaxError(error);
-          }
-        })
-        .finally(() => this.set("saving", false));
-    },
+        if (this.afterSave) {
+          this.afterSave();
+        }
+      })
+      .catch((error) => {
+        const json = error.jqXHR.responseJSON;
+        if (error.jqXHR.status === 422 && json.user_count) {
+          this.editGroupNotifications(json);
+        } else {
+          popupAjaxError(error);
+        }
+      })
+      .finally(() => this.set("saving", false));
+  },
+
+  @action
+  async editGroupNotifications(json) {
+    await this.modal.show(GroupDefaultNotificationsModal, {
+      model: {
+        count: json.user_count,
+        setUpdateExistingUsers: this.setUpdateExistingUsers,
+      },
+    });
+    this.save();
   },
 });
diff --git a/app/assets/javascripts/discourse/app/components/modal/group-default-notifications.hbs b/app/assets/javascripts/discourse/app/components/modal/group-default-notifications.hbs
new file mode 100644
index 00000000000..a27d0ac6d74
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/group-default-notifications.hbs
@@ -0,0 +1,19 @@
+<DModal
+  @title={{i18n "groups.default_notifications.modal_title"}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    {{i18n "groups.default_notifications.modal_description" count=@model.count}}
+  </:body>
+  <:footer>
+    <DButton
+      @action={{this.updateExistingUsers}}
+      @label="groups.default_notifications.modal_yes"
+      class="btn-primary"
+    />
+    <DButton
+      @action={{this.cancel}}
+      @label="groups.default_notifications.modal_no"
+    />
+  </:footer>
+</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/group-default-notifications.js b/app/assets/javascripts/discourse/app/components/modal/group-default-notifications.js
new file mode 100644
index 00000000000..1c6dae86ff3
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/group-default-notifications.js
@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+
+export default class GroupDefaultNotifications extends Component {
+  @action
+  updateExistingUsers() {
+    this.args.model.setUpdateExistingUsers(true);
+    this.args.closeModal();
+  }
+
+  @action
+  cancel() {
+    this.args.model.setUpdateExistingUsers(false);
+    this.args.closeModal();
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/group-default-notifications.js b/app/assets/javascripts/discourse/app/controllers/group-default-notifications.js
deleted file mode 100644
index 8c3a2648989..00000000000
--- a/app/assets/javascripts/discourse/app/controllers/group-default-notifications.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import ModalUpdateExistingUsers from "discourse/mixins/modal-update-existing-users";
-
-export default Controller.extend(ModalFunctionality, ModalUpdateExistingUsers);
diff --git a/app/assets/javascripts/discourse/app/templates/modal/group-default-notifications.hbs b/app/assets/javascripts/discourse/app/templates/modal/group-default-notifications.hbs
deleted file mode 100644
index 10250ecf0c7..00000000000
--- a/app/assets/javascripts/discourse/app/templates/modal/group-default-notifications.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-<DModalBody @title="groups.default_notifications.modal_title">
-  {{i18n
-    "groups.default_notifications.modal_description"
-    count=this.model.count
-  }}
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @action={{action "updateExistingUsers"}}
-    @class="btn-primary"
-    @label="groups.default_notifications.modal_yes"
-  />
-  <DButton
-    @action={{action "cancel"}}
-    @label="groups.default_notifications.modal_no"
-  />
-</div>
\ No newline at end of file