From 3e69f31e0b51e73b283fb670e3a7bcd37df77a86 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Sat, 17 Aug 2024 17:44:56 +0200
Subject: [PATCH] DEV: migrates webhook-status to gjs (#28407)

This commit also adds a test for this component.

---------

Co-authored-by: Jarek Radosz <jarek@cvx.dev>
---
 .../{webhook-status.js => webhook-status.gjs} |  8 ++-
 .../admin/addon/components/webhook-status.hbs |  2 -
 .../discourse/app/lib/fabricators.js          |  4 ++
 .../components/webhook-status-test.gjs        | 71 +++++++++++++++++++
 4 files changed, 82 insertions(+), 3 deletions(-)
 rename app/assets/javascripts/admin/addon/components/{webhook-status.js => webhook-status.gjs} (73%)
 delete mode 100644 app/assets/javascripts/admin/addon/components/webhook-status.hbs
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/webhook-status-test.gjs

diff --git a/app/assets/javascripts/admin/addon/components/webhook-status.js b/app/assets/javascripts/admin/addon/components/webhook-status.gjs
similarity index 73%
rename from app/assets/javascripts/admin/addon/components/webhook-status.js
rename to app/assets/javascripts/admin/addon/components/webhook-status.gjs
index 7dc0450708a..078aa8d9e6d 100644
--- a/app/assets/javascripts/admin/addon/components/webhook-status.js
+++ b/app/assets/javascripts/admin/addon/components/webhook-status.gjs
@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import icon from "discourse-common/helpers/d-icon";
 import I18n from "discourse-i18n";
 
 export default class WebhookStatus extends Component {
@@ -6,7 +7,7 @@ export default class WebhookStatus extends Component {
   iconClasses = ["text-muted", "text-danger", "text-successful", "text-muted"];
 
   get status() {
-    const lastStatus = this.args.webhook.last_delivery_status;
+    const lastStatus = this.args.webhook.get("last_delivery_status");
     return this.args.deliveryStatuses.find((s) => s.id === lastStatus);
   }
 
@@ -21,4 +22,9 @@ export default class WebhookStatus extends Component {
   get iconClass() {
     return this.iconClasses[this.status.id - 1];
   }
+
+  <template>
+    {{icon this.iconName class=this.iconClass}}
+    {{this.deliveryStatus}}
+  </template>
 }
diff --git a/app/assets/javascripts/admin/addon/components/webhook-status.hbs b/app/assets/javascripts/admin/addon/components/webhook-status.hbs
deleted file mode 100644
index 34302bad822..00000000000
--- a/app/assets/javascripts/admin/addon/components/webhook-status.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-{{d-icon this.iconName (hash class=this.iconClass)}}
-{{this.deliveryStatus}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/lib/fabricators.js b/app/assets/javascripts/discourse/app/lib/fabricators.js
index 9616a022718..d26accabdba 100644
--- a/app/assets/javascripts/discourse/app/lib/fabricators.js
+++ b/app/assets/javascripts/discourse/app/lib/fabricators.js
@@ -77,6 +77,10 @@ export default class CoreFabricators {
     });
   }
 
+  webhook(args = {}) {
+    return this.store.createRecord("web-hook", args);
+  }
+
   upload() {
     return {
       extension: "jpeg",
diff --git a/app/assets/javascripts/discourse/tests/integration/components/webhook-status-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/webhook-status-test.gjs
new file mode 100644
index 00000000000..facdec89e79
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/webhook-status-test.gjs
@@ -0,0 +1,71 @@
+import { getOwner } from "@ember/owner";
+import { render, rerender } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import CoreFabricators from "discourse/lib/fabricators";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import WebhookStatus from "admin/components/webhook-status";
+
+module("Integration | Component | webhook-status", function (hooks) {
+  setupRenderingTest(hooks);
+
+  const DELIVERY_STATUSES = [
+    { id: 1, name: "inactive" },
+    { id: 2, name: "failed" },
+    { id: 3, name: "successful" },
+    { id: 4, name: "disabled" },
+  ];
+
+  test("deliveryStatus", async function (assert) {
+    const webhook = new CoreFabricators(getOwner(this)).webhook();
+    await render(<template>
+      <WebhookStatus
+        @deliveryStatuses={{DELIVERY_STATUSES}}
+        @webhook={{webhook}}
+      />
+    </template>);
+
+    assert.dom().hasText("Inactive");
+
+    webhook.set("last_delivery_status", 2);
+
+    await rerender();
+
+    assert.dom().hasText("Failed");
+  });
+
+  test("iconName", async function (assert) {
+    const webhook = new CoreFabricators(getOwner(this)).webhook();
+    await render(<template>
+      <WebhookStatus
+        @deliveryStatuses={{DELIVERY_STATUSES}}
+        @webhook={{webhook}}
+      />
+    </template>);
+
+    assert.dom(".d-icon-far-circle").exists();
+
+    webhook.set("last_delivery_status", 2);
+
+    await rerender();
+
+    assert.dom(".d-icon-times-circle").exists();
+  });
+
+  test("iconClass", async function (assert) {
+    const webhook = new CoreFabricators(getOwner(this)).webhook();
+    await render(<template>
+      <WebhookStatus
+        @deliveryStatuses={{DELIVERY_STATUSES}}
+        @webhook={{webhook}}
+      />
+    </template>);
+
+    assert.dom(".d-icon").hasClass("text-muted");
+
+    webhook.set("last_delivery_status", 2);
+
+    await rerender();
+
+    assert.dom(".d-icon").hasClass("text-danger");
+  });
+});