DEV: Convert fullscreen modals to component-based API (#22248)

This PR converts the following modals:
- `fullscreen-code`
- `fullscreen-table`

to make use of the new component-based API

app/assets/javascripts/discourse/app/components/modal/fullscreen-code.hbs

@@ -0,0 +1,11 @@
+<DModal
+  @closeModal={{this.closeModal}}
+  {{did-insert this.applyCodeblockButtons}}
+  class="fullscreen-code-modal"
+>
+  <:body>
+    <pre>
+      <code class={{@model.codeClasses}}>{{@model.code}}</code>
+    </pre>
+  </:body>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/fullscreen-code.js

@@ -0,0 +1,28 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import highlightSyntax from "discourse/lib/highlight-syntax";
+import CodeblockButtons from "discourse/lib/codeblock-buttons";
+
+export default class FullscreenCode extends Component {
+  @service siteSettings;
+  @service session;
+
+  @action
+  closeModal() {
+    this.codeBlockButtons.cleanup();
+    this.args.closeModal();
+  }
+
+  @action
+  applyCodeblockButtons(element) {
+    const modalElement = element.querySelector(".modal-body");
+    highlightSyntax(modalElement, this.siteSettings, this.session);
+
+    this.codeBlockButtons = new CodeblockButtons({
+      showFullscreen: false,
+      showCopy: true,
+    });
+    this.codeBlockButtons.attachToGeneric(modalElement);
+  }
+}

app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs

@@ -0,0 +1,5 @@
+<DModal @closeModal={{@closeModal}} class="fullscreen-table-modal">
+  <:body>
+    {{@model.tableHtml}}
+  </:body>
+</DModal>

app/assets/javascripts/discourse/app/controllers/fullscreen-code.js

@@ -1,28 +0,0 @@
-import Controller from "@ember/controller";
-import { afterRender } from "discourse-common/utils/decorators";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import highlightSyntax from "discourse/lib/highlight-syntax";
-import CodeblockButtons from "discourse/lib/codeblock-buttons";
-
-export default Controller.extend(ModalFunctionality, {
-  onShow() {
-    this._applyCodeblockButtons();
-  },
-
-  onClose() {
-    this.codeBlockButtons.cleanup();
-  },
-
-  @afterRender
-  _applyCodeblockButtons() {
-    const modalElement = document.querySelector(".modal-body");
-
-    highlightSyntax(modalElement, this.siteSettings, this.session);
-
-    this.codeBlockButtons = new CodeblockButtons({
-      showFullscreen: false,
-      showCopy: true,
-    });
-    this.codeBlockButtons.attachToGeneric(modalElement);
-  },
-});

app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js

@@ -9,7 +9,7 @@ import { setTextDirections } from "discourse/lib/text-direction";
 import { nativeLazyLoading } from "discourse/lib/lazy-load-images";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { create } from "virtual-dom";
-import showModal from "discourse/lib/show-modal";
+import FullscreenTableModal from "discourse/components/modal/fullscreen-table";
 
 export default {
   initialize(owner) {
@@ -17,6 +17,7 @@ export default {
       const siteSettings = owner.lookup("service:site-settings");
       const session = owner.lookup("service:session");
       const site = owner.lookup("service:site");
+      const modal = owner.lookup("service:modal");
       api.decorateCookedElement(
         (elem) => {
           return highlightSyntax(elem, siteSettings, session);
@@ -177,8 +178,7 @@ export default {
       function generateModal(event) {
         const table = event.currentTarget.parentElement.nextElementSibling;
         const tempTable = table.cloneNode(true);
-
+        modal.show(FullscreenTableModal, { model: { tableHtml: tempTable } });
-        showModal("fullscreen-table").set("tableHtml", tempTable);
       }
 
       function generatePopups(tables) {

app/assets/javascripts/discourse/app/lib/codeblock-buttons.js

@@ -2,11 +2,12 @@ import { cancel } from "@ember/runloop";
 import discourseLater from "discourse-common/lib/later";
 import Mobile from "discourse/lib/mobile";
 import { bind } from "discourse-common/utils/decorators";
-import showModal from "discourse/lib/show-modal";
 import I18n from "I18n";
 import { guidFor } from "@ember/object/internals";
 import { clipboardCopy } from "discourse/lib/utilities";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { getOwner } from "discourse-common/lib/get-owner";
+import FullscreenCodeModal from "discourse/components/modal/fullscreen-code";
 
 // Use to attach copy/fullscreen buttons to a block of code, either
 // within the post stream or for a regular element that contains
@@ -172,9 +173,12 @@ export default class CodeblockButtons {
           this._copyComplete(button);
         }
       } else if (action === "fullscreen") {
-        showModal("fullscreen-code").setProperties({
+        const modal = getOwner(this).lookup("service:modal");
-          code: text,
+        modal.show(FullscreenCodeModal, {
-          codeClasses: codeEl.className,
+          model: {
+            code: text,
+            codeClasses: codeEl.className,
+          },
         });
       }
     }

app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs

@@ -1,5 +0,0 @@
-<DModalBody>
-  <pre>
-    <code class={{this.codeClasses}}>{{this.code}}</code>
-  </pre>
-</DModalBody>

app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs

@@ -1,3 +0,0 @@
-<DModalBody>
-  {{this.tableHtml}}
-</DModalBody>