From b6819fd8c10badca3de4ea62dae27c8e01fb4677 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 11 Mar 2024 11:55:32 +0100
Subject: [PATCH] DEV: Convert IframedHtml to gjs (#24836)

* DEV: Convert IframedHtml to gjs
* disable lint
* didUpdate
* no className
---
 .../discourse/app/components/iframed-html.gjs | 25 +++++++++++++++++++
 .../discourse/app/components/iframed-html.js  | 17 -------------
 .../components/iframed-html-test.js           | 14 ++++-------
 3 files changed, 30 insertions(+), 26 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/iframed-html.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/iframed-html.js

diff --git a/app/assets/javascripts/discourse/app/components/iframed-html.gjs b/app/assets/javascripts/discourse/app/components/iframed-html.gjs
new file mode 100644
index 00000000000..0a516b8e4bc
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/iframed-html.gjs
@@ -0,0 +1,25 @@
+import Component from "@glimmer/component";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
+import { bind } from "discourse-common/utils/decorators";
+
+export default class IframedHtml extends Component {
+  @bind
+  writeHtml(element) {
+    const iframeDoc = element.contentWindow.document;
+    iframeDoc.open("text/html", "replace");
+    iframeDoc.write(this.args.html);
+    iframeDoc.close();
+  }
+
+  <template>
+    {{! template-lint-disable require-iframe-title }}
+    <iframe
+      {{didInsert this.writeHtml}}
+      {{didUpdate this.witeHtml @html}}
+      sandbox="allow-same-origin"
+      class={{if @html "iframed-html"}}
+      ...attributes
+    ></iframe>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/iframed-html.js b/app/assets/javascripts/discourse/app/components/iframed-html.js
deleted file mode 100644
index 7736a6e9850..00000000000
--- a/app/assets/javascripts/discourse/app/components/iframed-html.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Component from "@ember/component";
-
-export default Component.extend({
-  tagName: "iframe",
-  html: null,
-  classNameBindings: ["html:iframed-html"],
-  sandbox: "allow-same-origin",
-  attributeBindings: ["sandbox:sandbox"],
-
-  didRender() {
-    this._super(...arguments);
-    const iframeDoc = this.element.contentWindow.document;
-    iframeDoc.open("text/html", "replace");
-    iframeDoc.write(this.html);
-    iframeDoc.close();
-  },
-});
diff --git a/app/assets/javascripts/discourse/tests/integration/components/iframed-html-test.js b/app/assets/javascripts/discourse/tests/integration/components/iframed-html-test.js
index b4f8081bf70..4937dea9806 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/iframed-html-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/iframed-html-test.js
@@ -2,7 +2,6 @@ import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { queryAll } from "discourse/tests/helpers/qunit-helpers";
 
 module("Integration | Component | iframed-html", function (hooks) {
   setupRenderingTest(hooks);
@@ -12,16 +11,13 @@ module("Integration | Component | iframed-html", function (hooks) {
       hbs`<IframedHtml @html="<h1 id='find-me'>hello</h1>" class="this-is-an-iframe" />`
     );
 
-    const iframe = queryAll("iframe.this-is-an-iframe");
-    assert.strictEqual(iframe.length, 1, "inserts an iframe");
-
-    assert.ok(
-      iframe[0].classList.contains("this-is-an-iframe"),
-      "Adds className to the iframes classList"
-    );
+    assert
+      .dom("iframe.this-is-an-iframe")
+      .exists({ count: 1 }, "inserts an iframe");
 
+    const iframe = document.querySelector(".iframed-html");
     assert.strictEqual(
-      iframe[0].contentWindow.document.body.querySelectorAll("#find-me").length,
+      iframe.contentWindow.document.body.querySelectorAll("#find-me").length,
       1,
       "inserts the passed in html into the iframe"
     );