Revert "DEV: Convert modal wrapper from named outlet to component (#21932)" (#21964)

This reverts commit 80b77b2e65.

Some modal functionality has been broken like inviting an existing user
to a PM

app/assets/javascripts/discourse/app/components/d-modal-body.js

@@ -3,6 +3,7 @@ import { disableImplicitInjections } from "discourse/lib/implicit-injections";
 import { action } from "@ember/object";
 import { tracked } from "@glimmer/tracking";
 import { inject as service } from "@ember/service";
+import { getOwner } from "@ember/application";
 
 function pick(object, keys) {
   const result = {};
@@ -17,7 +18,6 @@ function pick(object, keys) {
 @disableImplicitInjections
 export default class DModalBody extends Component {
   @service appEvents;
-  @service modal;
 
   @tracked fixed = false;
 
@@ -29,7 +29,7 @@ export default class DModalBody extends Component {
     if (fixedParent) {
       this.fixed = true;
       $(fixedParent).modal("show");
-      this.modal.hidden = false;
+      getOwner(this).lookup("controller:modal").hidden = false;
     }
 
     this.appEvents.trigger(

app/assets/javascripts/discourse/app/components/d-modal.js

@@ -6,11 +6,11 @@ import { disableImplicitInjections } from "discourse/lib/implicit-injections";
 import { inject as service } from "@ember/service";
 import { action } from "@ember/object";
 import { tracked } from "@glimmer/tracking";
+import { getOwner } from "@ember/application";
 
 @disableImplicitInjections
 export default class DModal extends Component {
   @service appEvents;
-  @service modal;
 
   @tracked wrapperElement;
   @tracked modalBodyData = {};
@@ -147,7 +147,7 @@ export default class DModal extends Component {
     }
 
     if (data.fixed) {
-      this.modal.hidden = false;
+      getOwner(this).lookup("controller:modal").hidden = false;
     }
 
     this.modalBodyData = data;

app/assets/javascripts/discourse/app/components/modal-container.hbs

@@ -1,17 +0,0 @@
-<DModal
-  @modalClass={{concat-class
-    this.modal.modalClass
-    (if this.modal.opts.panels "has-tabs")
-  }}
-  @title={{this.modal.title}}
-  @titleAriaElementId={{this.modal.opts.titleAriaElementId}}
-  @panels={{this.modal.opts.panels}}
-  @selectedPanel={{this.modal.selectedPanel}}
-  @onSelectPanel={{this.modal.onSelectPanel}}
-  @hidden={{this.modal.hidden}}
-  @class="hidden"
-  @errors={{this.modal.errors}}
-  @closeModal={{this.closeModal}}
->
-  {{outlet "modalBody"}}
-</DModal>

app/assets/javascripts/discourse/app/components/modal-container.js

@@ -1,12 +0,0 @@
-import Component from "@glimmer/component";
-import { inject as service } from "@ember/service";
-import { action } from "@ember/object";
-
-export default class ModalContainer extends Component {
-  @service modal;
-
-  @action
-  closeModal(initiatedBy) {
-    this.modal.close(initiatedBy);
-  }
-}

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

@@ -0,0 +1,6 @@
+import Controller from "@ember/controller";
+import { tracked } from "@glimmer/tracking";
+
+export default class ModalController extends Controller {
+  @tracked hidden = true;
+}

app/assets/javascripts/discourse/app/mixins/modal-functionality.js

@@ -16,7 +16,8 @@ export default Mixin.create({
 
   actions: {
     closeModal() {
-      this.modal.close();
+      this.modal.send("closeModal");
+      this.set("panels", []);
     },
   },
 });

app/assets/javascripts/discourse/app/routes/application.js

@@ -212,6 +212,11 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
     },
   },
 
+  renderTemplate() {
+    this.render("application");
+    this.render("modal", { into: "application", outlet: "modal" });
+  },
+
   handleShowLogin() {
     if (this.siteSettings.enable_discourse_connect) {
       const returnPath = encodeURIComponent(window.location.pathname);

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

@@ -3,66 +3,28 @@ import { getOwner } from "@ember/application";
 import I18n from "I18n";
 import { dasherize } from "@ember/string";
 import { disableImplicitInjections } from "discourse/lib/implicit-injections";
-import { tracked } from "@glimmer/tracking";
 
 @disableImplicitInjections
 export default class ModalService extends Service {
   @service appEvents;
 
-  @tracked name;
-  @tracked opts = {};
-  @tracked selectedPanel;
-  @tracked hidden = true;
-
-  @tracked titleOverride;
-  @tracked modalClassOverride;
-  @tracked onSelectPanel;
-
-  get title() {
-    if (this.titleOverride) {
-      return this.titleOverride;
-    } else if (this.opts.titleTranslated) {
-      return this.opts.titleTranslated;
-    } else if (this.opts.title) {
-      return I18n.t(this.opts.title);
-    } else {
-      return null;
-    }
-  }
-
-  set title(value) {
-    this.titleOverride = value;
-  }
-
-  get modalClass() {
-    if (!this.#isRendered) {
-      return null;
-    }
-
-    return (
-      this.modalClassOverride ||
-      this.opts.modalClass ||
-      `${dasherize(this.name.replace(/^modals\//, "")).toLowerCase()}-modal`
-    );
-  }
-
-  set modalClass(value) {
-    this.modalClassOverride = value;
-  }
-
   show(name, opts = {}) {
     const container = getOwner(this);
     const route = container.lookup("route:application");
+    const modalController = route.controllerFor("modal");
 
-    this.opts = opts;
+    modalController.set(
+      "modalClass",
+      opts.modalClass || `${dasherize(name).toLowerCase()}-modal`
+    );
 
     const controllerName = opts.admin ? `modals/${name}` : name;
-    this.name = controllerName;
+    modalController.set("name", controllerName);
 
     let controller = container.lookup("controller:" + controllerName);
     const templateName = opts.templateName || dasherize(name);
 
-    const renderArgs = { into: "application", outlet: "modalBody" };
+    const renderArgs = { into: "modal", outlet: "modalBody" };
     if (controller) {
       renderArgs.controller = controllerName;
     } else {
@@ -78,12 +40,40 @@ export default class ModalService extends Service {
     const modalName = `modal/${templateName}`;
     const fullName = opts.admin ? `admin/templates/${modalName}` : modalName;
     route.render(fullName, renderArgs);
-
-    if (controller.actions.onSelectPanel) {
-      this.onSelectPanel = controller.actions.onSelectPanel.bind(controller);
+    if (opts.title) {
+      modalController.set("title", I18n.t(opts.title));
+    } else if (opts.titleTranslated) {
+      modalController.set("title", opts.titleTranslated);
+    } else {
+      modalController.set("title", null);
     }
 
-    controller.set("modal", this);
+    if (opts.titleAriaElementId) {
+      modalController.set("titleAriaElementId", opts.titleAriaElementId);
+    }
+
+    if (opts.panels) {
+      modalController.setProperties({
+        panels: opts.panels,
+        selectedPanel: opts.panels[0],
+      });
+
+      if (controller.actions.onSelectPanel) {
+        modalController.set(
+          "onSelectPanel",
+          controller.actions.onSelectPanel.bind(controller)
+        );
+      }
+
+      modalController.set(
+        "modalClass",
+        `${modalController.get("modalClass")} has-tabs`
+      );
+    } else {
+      modalController.setProperties({ panels: [], selectedPanel: null });
+    }
+
+    controller.set("modal", modalController);
     const model = opts.model;
     if (model) {
       controller.set("model", model);
@@ -97,44 +87,44 @@ export default class ModalService extends Service {
   }
 
   close(initiatedBy) {
-    const controllerName = this.name;
-    const controller = controllerName
-      ? getOwner(this).lookup(`controller:${controllerName}`)
-      : null;
+    const route = getOwner(this).lookup("route:application");
+    let modalController = route.controllerFor("modal");
+    const controllerName = modalController.get("name");
 
-    if (controller?.beforeClose?.() === false) {
-      return;
+    if (controllerName) {
+      const controller = getOwner(this).lookup(`controller:${controllerName}`);
+      if (controller && controller.beforeClose) {
+        if (false === controller.beforeClose()) {
+          return;
+        }
+      }
     }
 
     getOwner(this)
       .lookup("route:application")
-      .render("hide-modal", { into: "application", outlet: "modalBody" });
+      .render("hide-modal", { into: "modal", outlet: "modalBody" });
     $(".d-modal.fixed-modal").modal("hide");
 
-    if (controller) {
-      this.appEvents.trigger("modal:closed", {
-        name: controllerName,
-        controller,
-      });
+    if (controllerName) {
+      const controller = getOwner(this).lookup(`controller:${controllerName}`);
 
-      if (controller.onClose) {
-        controller.onClose({
-          initiatedByCloseButton: initiatedBy === "initiatedByCloseButton",
-          initiatedByClickOut: initiatedBy === "initiatedByClickOut",
-          initiatedByESC: initiatedBy === "initiatedByESC",
+      if (controller) {
+        this.appEvents.trigger("modal:closed", {
+          name: controllerName,
+          controller,
         });
+
+        if (controller.onClose) {
+          controller.onClose({
+            initiatedByCloseButton: initiatedBy === "initiatedByCloseButton",
+            initiatedByClickOut: initiatedBy === "initiatedByClickOut",
+            initiatedByESC: initiatedBy === "initiatedByESC",
+          });
+        }
       }
+      modalController.set("name", null);
     }
-    this.hidden = true;
-
-    this.name =
-      this.selectedPanel =
-      this.modalClassOverride =
-      this.titleOverride =
-      this.onSelectPanel =
-        null;
-
-    this.opts = {};
+    modalController.hidden = true;
   }
 
   hide() {
@@ -144,8 +134,4 @@ export default class ModalService extends Service {
   reopen() {
     $(".d-modal.fixed-modal").modal("show");
   }
-
-  get #isRendered() {
-    return !!this.name;
-  }
 }

app/assets/javascripts/discourse/app/templates/application.hbs

@@ -85,7 +85,7 @@
     @outletArgs={{hash showFooter=this.showFooter}}
   />
 
-  <ModalContainer />
+  {{outlet "modal"}}
   <DialogHolder />
   <TopicEntrance />
   <ComposerContainer />

app/assets/javascripts/discourse/app/templates/modal.hbs

@@ -0,0 +1,14 @@
+<DModal
+  @modalClass={{this.modalClass}}
+  @title={{this.title}}
+  @titleAriaElementId={{this.titleAriaElementId}}
+  @subtitle={{this.subtitle}}
+  @panels={{this.panels}}
+  @selectedPanel={{this.selectedPanel}}
+  @onSelectPanel={{this.onSelectPanel}}
+  @hidden={{this.hidden}}
+  @errors={{this.errors}}
+  @closeModal={{route-action "closeModal"}}
+>
+  {{outlet "modalBody"}}
+</DModal>

app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js

@@ -38,7 +38,7 @@ acceptance("Do not disturb", function (needs) {
 
     await click(tiles[0]);
 
-    assert.ok(query(".d-modal.hidden"), "modal is hidden");
+    assert.ok(query(".do-not-disturb-modal.hidden"), "modal is hidden");
 
     assert.ok(
       exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
@@ -69,7 +69,7 @@ acceptance("Do not disturb", function (needs) {
     );
 
     assert.ok(
-      query(".d-modal.hidden"),
+      query(".do-not-disturb-modal.hidden"),
       "DND modal is hidden after making a choice"
     );
 

app/assets/javascripts/discourse/tests/acceptance/modal-test.js

@@ -38,15 +38,15 @@ acceptance("Modal", function (needs) {
     await click(".login-button");
     assert.strictEqual(count(".d-modal:visible"), 1, "modal should appear");
 
-    const service = getOwner(this).lookup("service:modal");
-    assert.strictEqual(service.name, "login");
+    const controller = getOwner(this).lookup("controller:modal");
+    assert.strictEqual(controller.name, "login");
 
     await click(".modal-outer-container");
     assert.ok(
       !exists(".d-modal:visible"),
       "modal should disappear when you click outside"
     );
-    assert.strictEqual(service.name, null);
+    assert.strictEqual(controller.name, null);
 
     await click(".login-button");
     assert.strictEqual(count(".d-modal:visible"), 1, "modal should reappear");