DEV: refactor bootbox alerts (#18292)

app/assets/javascripts/admin/addon/components/admin-watched-word.js

@@ -1,12 +1,13 @@
 import Component from "@ember/component";
 import { alias, equal } from "@ember/object/computed";
-import bootbox from "bootbox";
 import discourseComputed from "discourse-common/utils/decorators";
 import { action } from "@ember/object";
 import I18n from "I18n";
+import { inject as service } from "@ember/service";
 
 export default Component.extend({
   classNames: ["watched-word"],
+  dialog: service(),
 
   isReplace: equal("actionKey", "replace"),
   isTag: equal("actionKey", "tag"),
@@ -26,7 +27,7 @@ export default Component.extend({
         this.action(this.word);
       })
       .catch((e) => {
-        bootbox.alert(
+        this.dialog.alert(
           I18n.t("generic_error_with_reason", {
             error: `http: ${e.status} - ${e.body}`,
           })

app/assets/javascripts/admin/addon/components/permalink-form.js

@@ -1,14 +1,15 @@
 import Component from "@ember/component";
 import I18n from "I18n";
 import Permalink from "admin/models/permalink";
-import bootbox from "bootbox";
 import discourseComputed, { bind } from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
 import { schedule } from "@ember/runloop";
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 
 export default Component.extend({
   tagName: "",
+  dialog: service(),
   formSubmitted: false,
   permalinkType: "topic_id",
   permalinkTypePlaceholder: fmt("permalinkType", "admin.permalink.%@"),
@@ -29,7 +30,7 @@ export default Component.extend({
   @bind
   focusPermalink() {
     schedule("afterRender", () =>
-      this.element.querySelector(".permalink-url")?.focus()
+      document.querySelector(".permalink-url")?.focus()
     );
   },
 
@@ -74,7 +75,12 @@ export default Component.extend({
             } else {
               error = I18n.t("generic_error");
             }
-            bootbox.alert(error, this.focusPermalink);
+
+            this.dialog.alert({
+              message: error,
+              didConfirm: () => this.focusPermalink(),
+              didCancel: () => this.focusPermalink(),
+            });
           }
         );
     }

app/assets/javascripts/admin/addon/components/screened-ip-address-form.js

@@ -2,8 +2,8 @@ import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import I18n from "I18n";
 import ScreenedIpAddress from "admin/models/screened-ip-address";
-import bootbox from "bootbox";
 import { schedule } from "@ember/runloop";
+import { inject as service } from "@ember/service";
 
 /**
   A form to create an IP address that will be blocked or allowed.
@@ -18,6 +18,7 @@ import { schedule } from "@ember/runloop";
 
 export default Component.extend({
   tagName: "form",
+  dialog: service(),
   classNames: ["screened-ip-address-form", "inline-form"],
   formSubmitted: false,
   actionName: "block",
@@ -47,6 +48,12 @@ export default Component.extend({
     }
   },
 
+  focusInput() {
+    schedule("afterRender", () => {
+      this.element.querySelector("input").focus();
+    });
+  },
+
   actions: {
     submit() {
       if (!this.formSubmitted) {
@@ -60,22 +67,20 @@ export default Component.extend({
           .then((result) => {
             this.setProperties({ ip_address: "", formSubmitted: false });
             this.action(ScreenedIpAddress.create(result.screened_ip_address));
-            schedule("afterRender", () =>
-              this.element.querySelector("input").focus()
-            );
+            this.focusInput();
           })
           .catch((e) => {
             this.set("formSubmitted", false);
-            const msg = e.jqXHR.responseJSON?.errors
+            const message = e.jqXHR.responseJSON?.errors
               ? I18n.t("generic_error_with_reason", {
                   error: e.jqXHR.responseJSON.errors.join(". "),
                 })
               : I18n.t("generic_error");
-            bootbox.alert(msg, () =>
-              schedule("afterRender", () =>
-                this.element.querySelector("input").focus()
-              )
-            );
+            this.dialog.alert({
+              message,
+              didConfirm: () => this.focusInput(),
+              didCancel: () => this.focusInput(),
+            });
           });
       }
     },

app/assets/javascripts/admin/addon/components/tags-uploader.js

@@ -2,10 +2,11 @@ import Component from "@ember/component";
 import I18n from "I18n";
 import UppyUploadMixin from "discourse/mixins/uppy-upload";
 import { alias } from "@ember/object/computed";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Component.extend(UppyUploadMixin, {
   type: "csv",
+  dialog: service(),
   uploadUrl: "/tags/upload",
   addDisabled: alias("uploading"),
   elementId: "tag-uploader",
@@ -16,9 +17,8 @@ export default Component.extend(UppyUploadMixin, {
   },
 
   uploadDone() {
-    bootbox.alert(I18n.t("tagging.upload_successful"), () => {
-      this.refresh();
-      this.closeModal();
-    });
+    this.closeModal();
+    this.refresh();
+    this.dialog.alert(I18n.t("tagging.upload_successful"));
   },
 });

app/assets/javascripts/admin/addon/components/watched-word-form.js

@@ -2,13 +2,14 @@ import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import I18n from "I18n";
 import WatchedWord from "admin/models/watched-word";
-import bootbox from "bootbox";
 import { equal } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
 import { schedule } from "@ember/runloop";
+import { inject as service } from "@ember/service";
 
 export default Component.extend({
   tagName: "form",
+  dialog: service(),
   classNames: ["watched-word-form"],
   formSubmitted: false,
   actionKey: null,
@@ -55,6 +56,10 @@ export default Component.extend({
     });
   },
 
+  focusInput() {
+    schedule("afterRender", () => this.element.querySelector("input").focus());
+  },
+
   actions: {
     changeSelectedTags(tags) {
       this.setProperties({
@@ -98,22 +103,20 @@ export default Component.extend({
               isCaseSensitive: false,
             });
             this.action(WatchedWord.create(result));
-            schedule("afterRender", () =>
-              this.element.querySelector("input").focus()
-            );
+            this.focusInput();
           })
           .catch((e) => {
             this.set("formSubmitted", false);
-            const msg = e.jqXHR.responseJSON?.errors
+            const message = e.jqXHR.responseJSON?.errors
               ? I18n.t("generic_error_with_reason", {
                   error: e.jqXHR.responseJSON.errors.join(". "),
                 })
               : I18n.t("generic_error");
-            bootbox.alert(msg, () =>
-              schedule("afterRender", () =>
-                this.element.querySelector("input").focus()
-              )
-            );
+            this.dialog.alert({
+              message,
+              didConfirm: () => this.focusInput(),
+              didCancel: () => this.focusInput(),
+            });
           });
       }
     },

app/assets/javascripts/admin/addon/components/watched-word-uploader.js

@@ -2,7 +2,7 @@ import Component from "@ember/component";
 import I18n from "I18n";
 import UppyUploadMixin from "discourse/mixins/uppy-upload";
 import { alias } from "@ember/object/computed";
-import bootbox from "bootbox";
+import { dialog } from "discourse/lib/uploads";
 
 export default Component.extend(UppyUploadMixin, {
   type: "txt",
@@ -21,7 +21,7 @@ export default Component.extend(UppyUploadMixin, {
 
   uploadDone() {
     if (this) {
-      bootbox.alert(I18n.t("admin.watched_words.form.upload_successful"));
+      dialog.alert(I18n.t("admin.watched_words.form.upload_successful"));
       this.done();
     }
   },