DEV: Refactor the last few bootbox dialogs (#18416)

app/assets/javascripts/admin/addon/components/embeddable-host.js

@@ -1,9 +1,9 @@
 import Category from "discourse/models/category";
 import Component from "@ember/component";
 import I18n from "I18n";
-import bootbox from "bootbox";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import discourseComputed from "discourse-common/utils/decorators";
+import { inject as service } from "@ember/service";
 import { isEmpty } from "@ember/utils";
 import { or } from "@ember/object/computed";
 import { popupAjaxError } from "discourse/lib/ajax-error";
@@ -13,6 +13,7 @@ export default Component.extend(bufferedProperty("host"), {
   tagName: "tr",
   categoryId: null,
   category: null,
+  dialog: service(),
 
   editing: or("host.isNew", "editToggled"),
 
@@ -61,12 +62,13 @@ export default Component.extend(bufferedProperty("host"), {
     },
 
     delete() {
-      bootbox.confirm(I18n.t("admin.embedding.confirm_delete"), (result) => {
-        if (result) {
-          this.host.destroyRecord().then(() => {
+      return this.dialog.confirm({
+        message: I18n.t("admin.embedding.confirm_delete"),
+        didConfirm: () => {
+          return this.host.destroyRecord().then(() => {
             this.deleteHost(this.host);
           });
-        }
+        },
       });
     },
 

app/assets/javascripts/admin/addon/controllers/admin-customize-email-templates-edit.js

@@ -1,13 +1,14 @@
 import Controller, { inject as controller } from "@ember/controller";
 import I18n from "I18n";
 import { action } from "@ember/object";
-import bootbox from "bootbox";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { inject as service } from "@ember/service";
 
 export default Controller.extend(bufferedProperty("emailTemplate"), {
   adminCustomizeEmailTemplates: controller(),
+  dialog: service(),
   emailTemplate: null,
   saved: false,
 
@@ -42,20 +43,19 @@ export default Controller.extend(bufferedProperty("emailTemplate"), {
   @action
   revertChanges() {
     this.set("saved", false);
-    bootbox.confirm(
-      I18n.t("admin.customize.email_templates.revert_confirm"),
-      (result) => {
-        if (result) {
-          this.emailTemplate
-            .revert()
-            .then((props) => {
-              const buffered = this.buffered;
-              buffered.setProperties(props);
-              this.commitBuffer();
-            })
-            .catch(popupAjaxError);
-        }
-      }
-    );
+
+    this.dialog.yesNoConfirm({
+      title: I18n.t("admin.customize.email_templates.revert_confirm"),
+      didConfirm: () => {
+        return this.emailTemplate
+          .revert()
+          .then((props) => {
+            const buffered = this.buffered;
+            buffered.setProperties(props);
+            this.commitBuffer();
+          })
+          .catch(popupAjaxError);
+      },
+    });
   },
 });

app/assets/javascripts/admin/addon/controllers/admin-customize-themes-show.js

@@ -10,7 +10,6 @@ import Controller from "@ember/controller";
 import EmberObject from "@ember/object";
 import I18n from "I18n";
 import ThemeSettings from "admin/models/theme-settings";
-import bootbox from "bootbox";
 import discourseComputed from "discourse-common/utils/decorators";
 import { makeArray } from "discourse-common/lib/helpers";
 import { popupAjaxError } from "discourse/lib/ajax-error";
@@ -306,14 +305,10 @@ export default Controller.extend({
 
     editTheme() {
       if (this.get("model.remote_theme.is_git")) {
-        bootbox.confirm(
-          I18n.t("admin.customize.theme.edit_confirm"),
-          (result) => {
-            if (result) {
-              this.transitionToEditRoute();
-            }
-          }
-        );
+        this.dialog.confirm({
+          message: I18n.t("admin.customize.theme.edit_confirm"),
+          didConfirm: () => this.transitionToEditRoute(),
+        });
       } else {
         this.transitionToEditRoute();
       }

app/assets/javascripts/admin/addon/controllers/admin-user-fields.js

@@ -1,12 +1,13 @@
 import { gte, sort } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import I18n from "I18n";
-import bootbox from "bootbox";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { inject as service } from "@ember/service";
 
 const MAX_FIELDS = 30;
 
 export default Controller.extend({
+  dialog: service(),
   fieldTypes: null,
   createDisabled: gte("model.length", MAX_FIELDS),
   sortedFields: sort("model", "fieldSortOrder"),
@@ -53,18 +54,17 @@ export default Controller.extend({
 
       // Only confirm if we already been saved
       if (f.get("id")) {
-        bootbox.confirm(
-          I18n.t("admin.user_fields.delete_confirm"),
-          function (result) {
-            if (result) {
-              f.destroyRecord()
-                .then(function () {
-                  model.removeObject(f);
-                })
-                .catch(popupAjaxError);
-            }
-          }
-        );
+        this.dialog.yesNoConfirm({
+          message: I18n.t("admin.user_fields.delete_confirm"),
+          didConfirm: () => {
+            return f
+              .destroyRecord()
+              .then(function () {
+                model.removeObject(f);
+              })
+              .catch(popupAjaxError);
+          },
+        });
       } else {
         model.removeObject(f);
       }

app/assets/javascripts/admin/addon/mixins/penalty-controller.js

@@ -2,11 +2,12 @@ import I18n from "I18n";
 import Mixin from "@ember/object/mixin";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { Promise } from "rsvp";
-import bootbox from "bootbox";
 import { extractError } from "discourse/lib/ajax-error";
 import { next } from "@ember/runloop";
+import { inject as service } from "@ember/service";
 
 export default Mixin.create(ModalFunctionality, {
+  dialog: service(),
   errorMessage: null,
   reason: null,
   message: null,
@@ -40,15 +41,15 @@ export default Mixin.create(ModalFunctionality, {
         (this.message && this.message.length > 1))
     ) {
       this.send("hideModal");
-      bootbox.confirm(I18n.t("admin.user.confirm_cancel_penalty"), (result) => {
-        if (result) {
+      this.dialog.confirm({
+        message: I18n.t("admin.user.confirm_cancel_penalty"),
+        didConfirm: () => {
           next(() => {
             this.set("confirmClose", true);
             this.send("closeModal");
           });
-        } else {
-          next(() => this.send("reopenModal"));
-        }
+        },
+        didCancel: () => this.send("reopenModal"),
       });
       return false;
     }

app/assets/javascripts/admin/addon/routes/admin-customize-email-style-edit.js

@@ -1,8 +1,9 @@
 import I18n from "I18n";
 import Route from "@ember/routing/route";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Route.extend({
+  dialog: service(),
   model(params) {
     return {
       model: this.modelFor("adminCustomizeEmailStyle"),
@@ -26,17 +27,15 @@ export default Route.extend({
         transition.intent.name !== this.routeName
       ) {
         transition.abort();
-        bootbox.confirm(
-          I18n.t("admin.customize.theme.unsaved_changes_alert"),
-          I18n.t("admin.customize.theme.discard"),
-          I18n.t("admin.customize.theme.stay"),
-          (result) => {
-            if (!result) {
-              this._shouldAlertUnsavedChanges = false;
-              transition.retry();
-            }
-          }
-        );
+        this.dialog.confirm({
+          message: I18n.t("admin.customize.theme.unsaved_changes_alert"),
+          confirmButtonLabel: "admin.customize.theme.discard",
+          cancelButtonLabel: "admin.customize.theme.stay",
+          didConfirm: () => {
+            this._shouldAlertUnsavedChanges = false;
+            transition.retry();
+          },
+        });
       }
     },
   },

app/assets/javascripts/admin/addon/routes/admin-customize-themes-edit.js

@@ -1,8 +1,10 @@
 import I18n from "I18n";
 import Route from "@ember/routing/route";
-import bootbox from "bootbox";
+import { inject as service } from "@ember/service";
 
 export default Route.extend({
+  dialog: service(),
+
   model(params) {
     const all = this.modelFor("adminCustomizeThemes");
     const model = all.findBy("id", parseInt(params.theme_id, 10));
@@ -56,17 +58,16 @@ export default Route.extend({
         transition.intent.name !== this.routeName
       ) {
         transition.abort();
-        bootbox.confirm(
-          I18n.t("admin.customize.theme.unsaved_changes_alert"),
-          I18n.t("admin.customize.theme.discard"),
-          I18n.t("admin.customize.theme.stay"),
-          (result) => {
-            if (!result) {
-              this.set("shouldAlertUnsavedChanges", false);
-              transition.retry();
-            }
-          }
-        );
+
+        this.dialog.confirm({
+          message: I18n.t("admin.customize.theme.unsaved_changes_alert"),
+          confirmButtonLabel: "admin.customize.theme.discard",
+          cancelButtonLabel: "admin.customize.theme.stay",
+          didConfirm: () => {
+            this.set("shouldAlertUnsavedChanges", false);
+            transition.retry();
+          },
+        });
       }
     },
   },

app/assets/javascripts/admin/addon/routes/admin-customize-themes-show.js

@@ -2,23 +2,11 @@ import { COMPONENTS, THEMES } from "admin/models/theme";
 import I18n from "I18n";
 import Route from "@ember/routing/route";
 import { scrollTop } from "discourse/mixins/scroll-top";
-import bootbox from "bootbox";
-
-export function showUnassignedComponentWarning(theme, callback) {
-  bootbox.confirm(
-    I18n.t("admin.customize.theme.unsaved_parent_themes"),
-    I18n.t("admin.customize.theme.discard"),
-    I18n.t("admin.customize.theme.stay"),
-    (result) => {
-      if (!result) {
-        theme.set("recentlyInstalled", false);
-      }
-      callback(result);
-    }
-  );
-}
+import { inject as service } from "@ember/service";
 
 export default Route.extend({
+  dialog: service(),
+
   serialize(model) {
     return { theme_id: model.get("id") };
   },
@@ -72,10 +60,14 @@ export default Route.extend({
       const model = this.controller.model;
       if (model.warnUnassignedComponent) {
         transition.abort();
-        showUnassignedComponentWarning(model, (result) => {
-          if (!result) {
+
+        this.dialog.yesNoConfirm({
+          message: I18n.t("admin.customize.theme.unsaved_parent_themes"),
+          didConfirm: () => {
+            model.set("recentlyInstalled", false);
             transition.retry();
-          }
+          },
+          didCancel: () => model.set("recentlyInstalled", false),
         });
       }
     },

app/assets/javascripts/admin/addon/routes/admin-customize-themes.js

@@ -1,9 +1,12 @@
 import Route from "@ember/routing/route";
 import showModal from "discourse/lib/show-modal";
+import I18n from "I18n";
 import { next } from "@ember/runloop";
-import { showUnassignedComponentWarning } from "admin/routes/admin-customize-themes-show";
+import { inject as service } from "@ember/service";
 
 export default Route.extend({
+  dialog: service(),
+
   queryParams: {
     repoUrl: null,
     repoName: null,
@@ -35,11 +38,13 @@ export default Route.extend({
       const currentTheme = this.controllerFor(
         "adminCustomizeThemes.show"
       ).model;
-      if (currentTheme && currentTheme.warnUnassignedComponent) {
-        showUnassignedComponentWarning(currentTheme, (result) => {
-          if (!result) {
+      if (currentTheme?.warnUnassignedComponent) {
+        this.dialog.yesNoConfirm({
+          message: I18n.t("admin.customize.theme.unsaved_parent_themes"),
+          didConfirm: () => {
+            currentTheme.set("recentlyInstalled", false);
             showModal("admin-install-theme", { admin: true });
-          }
+          },
         });
       } else {
         showModal("admin-install-theme", { admin: true });

app/assets/javascripts/admin/addon/services/admin-tools.js

@@ -3,10 +3,9 @@ import I18n from "I18n";
 import { Promise } from "rsvp";
 import Service, { inject as service } from "@ember/service";
 import { ajax } from "discourse/lib/ajax";
-import bootbox from "bootbox";
 import { getOwner } from "discourse-common/lib/get-owner";
-import { iconHTML } from "discourse-common/lib/icon-library";
 import showModal from "discourse/lib/show-modal";
+import { htmlSafe } from "@ember/template";
 
 // A service that can act as a bridge between the front end Discourse application
 // and the admin application. Use this if you need front end code to access admin
@@ -79,58 +78,50 @@ export default Service.extend({
       : Promise.resolve();
 
     return tryEmail.then(() => {
-      let message = I18n.messageFormat("flagging.delete_confirm_MF", {
-        POSTS: adminUser.get("post_count"),
-        TOPICS: adminUser.get("topic_count"),
-        email:
-          adminUser.get("email") || I18n.t("flagging.hidden_email_address"),
-        ip_address:
-          adminUser.get("ip_address") || I18n.t("flagging.ip_address_missing"),
-      });
+      let message = htmlSafe(
+        I18n.messageFormat("flagging.delete_confirm_MF", {
+          POSTS: adminUser.get("post_count"),
+          TOPICS: adminUser.get("topic_count"),
+          email:
+            adminUser.get("email") || I18n.t("flagging.hidden_email_address"),
+          ip_address:
+            adminUser.get("ip_address") ||
+            I18n.t("flagging.ip_address_missing"),
+        })
+      );
 
       let userId = adminUser.get("id");
 
       return new Promise((resolve, reject) => {
-        const buttons = [
-          {
-            label: I18n.t("composer.cancel"),
-            class: "d-modal-cancel",
-            link: true,
-          },
-          {
-            label:
-              `${iconHTML("exclamation-triangle")} ` +
-              I18n.t("flagging.yes_delete_spammer"),
-            class: "btn btn-danger confirm-delete",
-            callback() {
-              return ajax(`/admin/users/${userId}.json`, {
-                type: "DELETE",
-                data: {
-                  delete_posts: true,
-                  block_email: true,
-                  block_urls: true,
-                  block_ip: true,
-                  delete_as_spammer: true,
-                  context: window.location.pathname,
-                },
+        this.dialog.deleteConfirm({
+          message,
+          class: "flagging-delete-spammer",
+          confirmButtonLabel: "flagging.yes_delete_spammer",
+          confirmButtonIcon: "exclamation-triangle",
+          didConfirm: () => {
+            return ajax(`/admin/users/${userId}.json`, {
+              type: "DELETE",
+              data: {
+                delete_posts: true,
+                block_email: true,
+                block_urls: true,
+                block_ip: true,
+                delete_as_spammer: true,
+                context: window.location.pathname,
+              },
+            })
+              .then((result) => {
+                if (result.deleted) {
+                  resolve();
+                } else {
+                  throw new Error("failed to delete");
+                }
               })
-                .then((result) => {
-                  if (result.deleted) {
-                    resolve();
-                  } else {
-                    throw new Error("failed to delete");
-                  }
-                })
-                .catch(() => {
-                  this.dialog.alert(I18n.t("admin.user.delete_failed"));
-                  reject();
-                });
-            },
+              .catch(() => {
+                this.dialog.alert(I18n.t("admin.user.delete_failed"));
+                reject();
+              });
           },
-        ];
-
-        bootbox.dialog(message, buttons, {
-          classes: "flagging-delete-spammer",
         });
       });
     });