DEV: migrates webhook-status to gjs (#28407)

This commit also adds a test for this component.

---------

Co-authored-by: Jarek Radosz <jarek@cvx.dev>

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>
 }

app/assets/javascripts/admin/addon/components/webhook-status.hbs

@@ -1,2 +0,0 @@
-{{d-icon this.iconName (hash class=this.iconClass)}}
-{{this.deliveryStatus}}

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",

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");
+  });
+});