DEV: Convert d-modal and d-modal-body to glimmer components

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

@@ -0,0 +1,10 @@
+<div
+  id={{@id}}
+  class={{concat-class "modal-body" @class}}
+  tabindex="-1"
+  {{did-insert this.didInsert}}
+  {{will-destroy this.willDestroy}}
+  ...attributes
+>
+  {{yield}}
+</div>

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

@@ -1,54 +1,63 @@
-import { attributeBindings, classNames } from "@ember-decorators/component";
+import Component from "@glimmer/component";
-import Component from "@ember/component";
 import { scheduleOnce } from "@ember/runloop";
+import { disableImplicitInjections } from "discourse/lib/implicit-injections";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
 
-@classNames("modal-body")
+function pick(object, keys) {
-@attributeBindings("tabindex")
+  const result = {};
+  for (const key of keys) {
+    if (key in object) {
+      result[key] = object[key];
+    }
+  }
+  return result;
+}
+
+@disableImplicitInjections
 export default class DModalBody extends Component {
-  fixed = false;
+  @service appEvents;
-  submitOnEnter = true;
-  dismissable = true;
-  tabindex = -1;
 
-  didInsertElement() {
+  @tracked fixed = false;
-    super.didInsertElement(...arguments);
+
+  @action
+  didInsert(element) {
     this._modalAlertElement = document.getElementById("modal-alert");
     if (this._modalAlertElement) {
       this._clearFlash();
     }
 
-    let fixedParent = this.element.closest(".d-modal.fixed-modal");
+    const fixedParent = element.closest(".d-modal.fixed-modal");
     if (fixedParent) {
-      this.set("fixed", true);
+      this.fixed = true;
       $(fixedParent).modal("show");
     }
 
-    scheduleOnce("afterRender", this, this._afterFirstRender);
+    scheduleOnce("afterRender", () => this._afterFirstRender(element));
-    this.appEvents.on("modal-body:flash", this, "_flash");
-    this.appEvents.on("modal-body:clearFlash", this, "_clearFlash");
   }
 
-  willDestroyElement() {
+  @action
-    super.willDestroyElement(...arguments);
+  willDestroy() {
     this.appEvents.off("modal-body:flash", this, "_flash");
     this.appEvents.off("modal-body:clearFlash", this, "_clearFlash");
     this.appEvents.trigger("modal:body-dismissed");
   }
 
-  _afterFirstRender() {
+  _afterFirstRender(element) {
-    const maxHeight = this.maxHeight;
+    const maxHeight = this.args.maxHeight;
     if (maxHeight) {
       const maxHeightFloat = parseFloat(maxHeight) / 100.0;
       if (maxHeightFloat > 0) {
         const viewPortHeight = $(window).height();
-        this.element.style.maxHeight =
+        element.style.maxHeight =
           Math.floor(maxHeightFloat * viewPortHeight) + "px";
       }
     }
 
     this.appEvents.trigger(
       "modal:body-shown",
-      this.getProperties(
+      pick(this.args, [
         "title",
         "rawTitle",
         "fixed",
@@ -56,8 +65,8 @@ export default class DModalBody extends Component {
         "rawSubtitle",
         "submitOnEnter",
         "dismissable",
-        "headerClass"
+        "headerClass",
-      )
+      ])
     );
   }
 

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

@@ -1,4 +1,25 @@
-<div class="modal-outer-container">
+{{! template-lint-disable no-down-event-binding }}
+{{! template-lint-disable no-invalid-interactive }}
+
+<div
+  class={{concat-class
+    "modal"
+    "d-modal"
+    this.modalClass
+    this.modalStyle
+    (if this.hasPanels "has-panels")
+  }}
+  id={{if (not-eq this.modalStyle "inline-modal") "discourse-modal"}}
+  data-keyboard="false"
+  aria-modal="true"
+  role="dialog"
+  aria-labelledby={{this.ariaLabelledby}}
+  ...attributes
+  {{did-insert this.setupListeners}}
+  {{will-destroy this.cleanupListeners}}
+  {{on "mousedown" this.handleMouseDown}}
+>
+  <div class="modal-outer-container">
     <div class="modal-middle-container">
       <div class="modal-inner-container">
         <PluginOutlet @name="above-modal-header" @connectorTagName="div" />
@@ -28,8 +49,8 @@
                 <ModalTab
                   @panel={{panel}}
                   @panelsLength={{this.panels.length}}
-                @selectedPanel={{this.selectedPanel}}
+                  @selectedPanel={{@selectedPanel}}
-                @onSelectPanel={{this.onSelectPanel}}
+                  @onSelectPanel={{@onSelectPanel}}
                 />
               {{/each}}
             </ul>
@@ -53,4 +74,5 @@
         {{/each}}
       </div>
     </div>
+  </div>
 </div>

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

@@ -1,80 +1,102 @@
-import {
+import Component from "@glimmer/component";
-  attributeBindings,
-  classNameBindings,
-} from "@ember-decorators/component";
-import Component from "@ember/component";
 import I18n from "I18n";
 import { next, schedule } from "@ember/runloop";
-import discourseComputed, { bind } from "discourse-common/utils/decorators";
+import { bind } from "discourse-common/utils/decorators";
+import { disableImplicitInjections } from "discourse/lib/implicit-injections";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
 
-@classNameBindings(
+@disableImplicitInjections
-  ":modal",
-  ":d-modal",
-  "modalClass",
-  "modalStyle",
-  "hasPanels"
-)
-@attributeBindings(
-  "dataKeyboard:data-keyboard",
-  "ariaModal:aria-modal",
-  "role",
-  "ariaLabelledby:aria-labelledby"
-)
 export default class DModal extends Component {
-  submitOnEnter = true;
+  @service appEvents;
-  dismissable = true;
-  title = null;
-  titleAriaElementId = null;
-  subtitle = null;
-  role = "dialog";
-  headerClass = null;
 
-  // // We handle ESC ourselves
+  @tracked wrapperElement;
-  dataKeyboard = "false";
+  @tracked modalBodyData = {};
-  // // Inform screen readers of the modal
-  ariaModal = "true";
 
-  init() {
+  get modalStyle() {
-    super.init(...arguments);
+    if (this.args.modalStyle === "inline-modal") {
-
+      return "inline-modal";
-    // If we need to render a second modal for any reason, we can't
+    } else {
-    // use `elementId`
+      return "fixed-modal";
-    if (this.modalStyle !== "inline-modal") {
-      this.set("elementId", "discourse-modal");
-      this.set("modalStyle", "fixed-modal");
     }
   }
 
-  didInsertElement() {
+  get submitOnEnter() {
-    super.didInsertElement(...arguments);
+    if ("submitOnEnter" in this.modalBodyData) {
+      return this.modalBodyData.submitOnEnter;
+    } else {
+      return true;
+    }
+  }
 
-    this.appEvents.on("modal:body-shown", this, "_modalBodyShown");
+  get dismissable() {
+    if ("dismissable" in this.modalBodyData) {
+      return this.modalBodyData.dismissable;
+    } else {
+      return true;
+    }
+  }
+
+  get title() {
+    if (this.modalBodyData.title) {
+      return I18n.t(this.modalBodyData.title);
+    } else if (this.modalBodyData.rawTitle) {
+      return this.modalBodyData.rawTitle;
+    } else {
+      return this.args.title;
+    }
+  }
+
+  get subtitle() {
+    if (this.modalBodyData.subtitle) {
+      return I18n.t(this.modalBodyData.subtitle);
+    }
+
+    return this.modalBodyData.rawSubtitle || this.args.subtitle;
+  }
+
+  get headerClass() {
+    return this.modalBodyData.headerClass;
+  }
+
+  get panels() {
+    return this.args.panels;
+  }
+
+  get errors() {
+    return this.args.errors;
+  }
+
+  @action
+  setupListeners(element) {
+    this.appEvents.on("modal:body-shown", this._modalBodyShown);
     document.documentElement.addEventListener(
       "keydown",
       this._handleModalEvents
     );
+    this.wrapperElement = element;
   }
 
-  willDestroyElement() {
+  @action
-    super.willDestroyElement(...arguments);
+  cleanupListeners() {
-
+    this.appEvents.off("modal:body-shown", this._modalBodyShown);
-    this.appEvents.off("modal:body-shown", this, "_modalBodyShown");
     document.documentElement.removeEventListener(
       "keydown",
       this._handleModalEvents
     );
   }
 
-  @discourseComputed("title", "titleAriaElementId")
+  get ariaLabelledby() {
-  ariaLabelledby(title, titleAriaElementId) {
+    if (this.args.titleAriaElementId) {
-    if (titleAriaElementId) {
+      return this.args.titleAriaElementId;
-      return titleAriaElementId;
+    } else if (this.args.title) {
-    }
-    if (title) {
       return "discourse-modal-title";
     }
+  }
 
-    return;
+  get modalClass() {
+    return this.modalBodyData.modalClass || this.args.modalClass;
   }
 
   triggerClickOnEnter(e) {
@@ -93,7 +115,8 @@ export default class DModal extends Component {
     return true;
   }
 
-  mouseDown(e) {
+  @action
+  handleMouseDown(e) {
     if (!this.dismissable) {
       return;
     }
@@ -105,46 +128,21 @@ export default class DModal extends Component {
       // Send modal close (which bubbles to ApplicationRoute) if clicked outside.
       // We do this because some CSS of ours seems to cover the backdrop and makes
       // it unclickable.
-      return this.attrs.closeModal?.("initiatedByClickOut");
+      return this.args.closeModal?.("initiatedByClickOut");
     }
   }
 
+  @bind
   _modalBodyShown(data) {
     if (this.isDestroying || this.isDestroyed) {
       return;
     }
 
     if (data.fixed) {
-      this.element.classList.remove("hidden");
+      this.wrapperElement.classList.remove("hidden");
     }
 
-    if (data.title) {
+    this.modalBodyData = data;
-      this.set("title", I18n.t(data.title));
-    } else if (data.rawTitle) {
-      this.set("title", data.rawTitle);
-    }
-
-    if (data.subtitle) {
-      this.set("subtitle", I18n.t(data.subtitle));
-    } else if (data.rawSubtitle) {
-      this.set("subtitle", data.rawSubtitle);
-    } else {
-      // if no subtitle provided, makes sure the previous subtitle
-      // of another modal is not used
-      this.set("subtitle", null);
-    }
-
-    if ("submitOnEnter" in data) {
-      this.set("submitOnEnter", data.submitOnEnter);
-    }
-
-    if ("dismissable" in data) {
-      this.set("dismissable", data.dismissable);
-    } else {
-      this.set("dismissable", true);
-    }
-
-    this.set("headerClass", data.headerClass || null);
 
     schedule("afterRender", () => {
       this._trapTab();
@@ -153,16 +151,16 @@ export default class DModal extends Component {
 
   @bind
   _handleModalEvents(event) {
-    if (this.element.classList.contains("hidden")) {
+    if (this.wrapperElement.classList.contains("hidden")) {
       return;
     }
 
     if (event.key === "Escape" && this.dismissable) {
-      next(() => this.attrs.closeModal("initiatedByESC"));
+      next(() => this.args.closeModal("initiatedByESC"));
     }
 
     if (event.key === "Enter" && this.triggerClickOnEnter(event)) {
-      this.element.querySelector(".modal-footer .btn-primary")?.click();
+      this.wrapperElement.querySelector(".modal-footer .btn-primary")?.click();
       event.preventDefault();
     }
 
@@ -172,11 +170,13 @@ export default class DModal extends Component {
   }
 
   _trapTab(event) {
-    if (this.element.classList.contains("hidden")) {
+    if (this.wrapperElement.classList.contains("hidden")) {
       return true;
     }
 
-    const innerContainer = this.element.querySelector(".modal-inner-container");
+    const innerContainer = this.wrapperElement.querySelector(
+      ".modal-inner-container"
+    );
     if (!innerContainer) {
       return;
     }