DEV: Control modal 'hidden' with Ember (#21562)

Moving all control of 'hidden' into Ember will resolve issues we're seeing with Ember fighting against manual DOM manipulation (both vanilla JS and JQuery).

Looking up `controller:modal` from components is not ideal. However, the next step in the refactoring is to create a modal 'service' which will be able to injected into components cleanly.

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 = {};
@@ -28,6 +29,7 @@ export default class DModalBody extends Component {
     if (fixedParent) {
       this.fixed = true;
       $(fixedParent).modal("show");
+      getOwner(this).lookup("controller:modal").hidden = false;
     }
 
     this.appEvents.trigger(

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

@@ -8,6 +8,7 @@
     this.modalClass
     this.modalStyle
     (if this.hasPanels "has-panels")
+    (if @hidden "hidden")
   }}
   id={{if (not-eq this.modalStyle "inline-modal") "discourse-modal"}}
   data-keyboard="false"

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

@@ -6,6 +6,7 @@ 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 {
@@ -146,19 +147,21 @@ export default class DModal extends Component {
     }
 
     if (data.fixed) {
-      this.wrapperElement.classList.remove("hidden");
+      getOwner(this).lookup("controller:modal").hidden = false;
     }
 
     this.modalBodyData = data;
 
-    schedule("afterRender", () => {
+    next(() => {
-      this._trapTab();
+      schedule("afterRender", () => {
+        this._trapTab();
+      });
     });
   }
 
   @bind
   _handleModalEvents(event) {
-    if (this.wrapperElement.classList.contains("hidden")) {
+    if (this.args.hidden) {
       return;
     }
 
@@ -177,7 +180,7 @@ export default class DModal extends Component {
   }
 
   _trapTab(event) {
-    if (this.wrapperElement.classList.contains("hidden")) {
+    if (this.args.hidden) {
       return true;
     }
 

app/assets/javascripts/discourse/app/components/hide-modal-trigger.js

@@ -2,6 +2,6 @@ import Component from "@ember/component";
 export default Component.extend({
   didInsertElement() {
     this._super(...arguments);
-    $(".d-modal.fixed-modal").modal("hide").addClass("hidden");
+    $(".d-modal.fixed-modal").modal("hide");
   },
 });

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

@@ -1,2 +1,6 @@
 import Controller from "@ember/controller";
-export default Controller.extend();
+import { tracked } from "@glimmer/tracking";
+
+export default class ModalController extends Controller {
+  @tracked hidden;
+}

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

@@ -190,6 +190,7 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
         }
         modalController.set("name", null);
       }
+      modalController.hidden = true;
     },
 
     /**

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

@@ -6,7 +6,7 @@
   @panels={{this.panels}}
   @selectedPanel={{this.selectedPanel}}
   @onSelectPanel={{this.onSelectPanel}}
-  @class="hidden"
+  @hidden={{this.hidden}}
   @errors={{this.errors}}
   @closeModal={{route-action "closeModal"}}
 >