DEV: Make dialog-holder a monorepo package (#19051)

app/assets/javascripts/dialog-holder/addon/components/dialog-holder.hbs

@@ -0,0 +1,33 @@
+<div id="dialog-holder" class="dialog-container {{this.dialog.class}}" aria-labelledby={{this.dialog.titleElementId}} aria-hidden="true">
+  <div class="dialog-overlay" data-a11y-dialog-hide></div>
+
+  {{#if this.dialog.type}}
+    <div class="dialog-content" role="document">
+      {{#if this.dialog.title}}
+        <div class="dialog-header">
+          <h3 id={{this.dialog.titleElementId}}>{{this.dialog.title}}</h3>
+          <DButton @icon="times" @action={{action this.dialog.cancel}} @class="btn-flat dialog-close close" @title="modal.close" />
+        </div>
+      {{/if}}
+
+      {{#if this.dialog.message}}
+        <div class="dialog-body">
+          {{this.dialog.message}}
+        </div>
+      {{/if}}
+
+      {{#if (notEq this.dialog.type "notice")}}
+        <div class="dialog-footer">
+          {{#each this.dialog.buttons as |button|}}
+            <DButton @icon={{button.icon}} @class={{button.class}} @action={{action "handleButtonAction" button}} @translatedLabel={{button.label}} />
+          {{else}}
+            <DButton @class={{this.dialog.confirmButtonClass}} @action={{this.dialog.didConfirmWrapped}} @icon={{this.dialog.confirmButtonIcon}} @label={{this.dialog.confirmButtonLabel}} />
+            {{#if this.dialog.shouldDisplayCancel}}
+              <DButton @class="btn-default" @action={{this.dialog.cancel}} @label={{this.dialog.cancelButtonLabel}} />
+            {{/if}}
+          {{/each}}
+        </div>
+      {{/if}}
+    </div>
+  {{/if}}
+</div>

app/assets/javascripts/dialog-holder/addon/components/dialog-holder.js

@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+
+export default class DialogHolder extends Component {
+  @service dialog;
+
+  @action
+  async handleButtonAction(btn) {
+    if (btn.action && typeof btn.action === "function") {
+      await btn.action();
+    }
+
+    this.dialog.cancel();
+  }
+}

app/assets/javascripts/dialog-holder/addon/services/dialog.js

@@ -0,0 +1,163 @@
+import Service from "@ember/service";
+import A11yDialog from "a11y-dialog";
+import { bind } from "discourse-common/utils/decorators";
+
+export default Service.extend({
+  message: null,
+  type: null,
+  dialogInstance: null,
+
+  title: null,
+  titleElementId: null,
+
+  confirmButtonIcon: null,
+  confirmButtonLabel: null,
+  confirmButtonClass: null,
+  cancelButtonLabel: null,
+  shouldDisplayCancel: null,
+
+  didConfirm: null,
+  didCancel: null,
+  buttons: null,
+  class: null,
+  _confirming: false,
+
+  dialog(params) {
+    const {
+      message,
+      type,
+      title,
+
+      confirmButtonIcon,
+      confirmButtonLabel = "ok_value",
+      confirmButtonClass = "btn-primary",
+      cancelButtonLabel = "cancel_value",
+      shouldDisplayCancel,
+
+      didConfirm,
+      didCancel,
+      buttons,
+    } = params;
+
+    const element = document.getElementById("dialog-holder");
+
+    this.setProperties({
+      message,
+      type,
+      dialogInstance: new A11yDialog(element),
+
+      title,
+      titleElementId: title !== null ? "dialog-title" : null,
+
+      confirmButtonClass,
+      confirmButtonLabel,
+      confirmButtonIcon,
+      cancelButtonLabel,
+      shouldDisplayCancel,
+
+      didConfirm,
+      didCancel,
+      buttons,
+      class: params.class,
+    });
+
+    this.dialogInstance.show();
+
+    this.dialogInstance.on("hide", () => {
+      if (!this._confirming && this.didCancel) {
+        this.didCancel();
+      }
+
+      this.reset();
+    });
+  },
+
+  alert(params) {
+    // support string param for easier porting of bootbox.alert
+    if (typeof params === "string") {
+      return this.dialog({
+        message: params,
+        type: "alert",
+      });
+    }
+
+    return this.dialog({
+      ...params,
+      type: "alert",
+    });
+  },
+
+  confirm(params) {
+    return this.dialog({
+      ...params,
+      shouldDisplayCancel: true,
+      buttons: null,
+      type: "confirm",
+    });
+  },
+
+  notice(message) {
+    return this.dialog({
+      message,
+      type: "notice",
+    });
+  },
+
+  yesNoConfirm(params) {
+    return this.confirm({
+      ...params,
+      confirmButtonLabel: "yes_value",
+      cancelButtonLabel: "no_value",
+    });
+  },
+
+  deleteConfirm(params) {
+    return this.confirm({
+      ...params,
+      confirmButtonClass: "btn-danger",
+      confirmButtonLabel: params.confirmButtonLabel || "delete",
+    });
+  },
+
+  reset() {
+    this.setProperties({
+      message: null,
+      type: null,
+      dialogInstance: null,
+
+      title: null,
+      titleElementId: null,
+
+      confirmButtonLabel: null,
+      confirmButtonIcon: null,
+      cancelButtonLabel: null,
+      shouldDisplayCancel: null,
+
+      didConfirm: null,
+      didCancel: null,
+      buttons: null,
+      class: null,
+
+      _confirming: false,
+    });
+  },
+
+  willDestroy() {
+    this.dialogInstance?.destroy();
+    this.reset();
+  },
+
+  @bind
+  didConfirmWrapped() {
+    if (this.didConfirm) {
+      this.didConfirm();
+    }
+    this._confirming = true;
+    this.dialogInstance.hide();
+  },
+
+  @bind
+  cancel() {
+    this.dialogInstance.hide();
+  },
+});

app/assets/javascripts/dialog-holder/app/components/dialog-holder.js

@@ -0,0 +1 @@
+export { default } from "dialog-holder/components/dialog-holder";

app/assets/javascripts/dialog-holder/app/services/dialog.js

@@ -0,0 +1 @@
+export { default } from "dialog-holder/services/dialog";

app/assets/javascripts/dialog-holder/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+module.exports = {
+  name: require("./package").name,
+
+  isDevelopingAddon() {
+    return true;
+  },
+};

app/assets/javascripts/dialog-holder/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "dialog-holder",
+  "version": "1.0.0",
+  "description": "TODO",
+  "author": "Discourse",
+  "license": "GPL-2.0-only",
+  "keywords": [
+    "ember-addon"
+  ],
+  "dependencies": {
+    "a11y-dialog": "7.5.2",
+    "ember-auto-import": "^2.4.3",
+    "ember-cli-babel": "^7.26.10",
+    "ember-cli-htmlbars": "^6.1.1"
+  },
+  "devDependencies": {
+    "webpack": "^5.75.0"
+  },
+  "engines": {
+    "node": "16.* || >= 18",
+    "npm": "please-use-yarn",
+    "yarn": ">= 1.21.1"
+  }
+}