DEV: Convert time-gap widget to a component (#26165)

* DEV: Convert time-gap widget to a component

* inline timegap component

* Remove top level wrapper

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

app/assets/javascripts/discourse/app/components/time-gap.gjs

@@ -0,0 +1,25 @@
+import Component from "@glimmer/component";
+import I18n from "discourse-i18n";
+
+export default class TimeGap extends Component {
+  get description() {
+    const daysSince = this.args.daysSince;
+
+    if (daysSince < 30) {
+      return I18n.t("dates.later.x_days", { count: daysSince });
+    } else if (daysSince < 365) {
+      const gapMonths = Math.round(daysSince / 30);
+      return I18n.t("dates.later.x_months", { count: gapMonths });
+    } else {
+      const gapYears = Math.round(daysSince / 365);
+      return I18n.t("dates.later.x_years", { count: gapYears });
+    }
+  }
+
+  <template>
+    <div class="topic-avatar"></div>
+    <div class="small-action-desc timegap">
+      {{this.description}}
+    </div>
+  </template>
+}

app/assets/javascripts/discourse/app/widgets/post-stream.js

@@ -1,3 +1,4 @@
+import { hbs } from "ember-cli-htmlbars";
 import $ from "jquery";
 import { h } from "virtual-dom";
 import { addWidgetCleanCallback } from "discourse/components/mount-widget";
@@ -5,6 +6,7 @@ import { Placeholder } from "discourse/lib/posts-with-placeholders";
 import transformPost from "discourse/lib/transform-post";
 import DiscourseURL from "discourse/lib/url";
 import { avatarFor } from "discourse/widgets/post";
+import RenderGlimmer from "discourse/widgets/render-glimmer";
 import { createWidget } from "discourse/widgets/widget";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { iconNode } from "discourse-common/lib/icon-library";
@@ -252,7 +254,14 @@ export default createWidget("post-stream", {
       if (prevDate) {
         const daysSince = Math.floor((curTime - prevDate) / DAY);
         if (daysSince > this.siteSettings.show_time_gap_days) {
-          result.push(this.attach("time-gap", { daysSince }));
+          result.push(
+            new RenderGlimmer(
+              this,
+              "div.time-gap.small-action",
+              hbs`<TimeGap @daysSince={{@data.daysSince}} />`,
+              { daysSince }
+            )
+          );
         }
       }
       prevDate = curTime;

app/assets/javascripts/discourse/app/widgets/time-gap.js

@@ -1,28 +0,0 @@
-import { h } from "virtual-dom";
-import { createWidget } from "discourse/widgets/widget";
-import I18n from "discourse-i18n";
-
-function description(attrs) {
-  const daysSince = attrs.daysSince;
-
-  if (daysSince < 30) {
-    return I18n.t("dates.later.x_days", { count: daysSince });
-  } else if (daysSince < 365) {
-    const gapMonths = Math.round(daysSince / 30);
-    return I18n.t("dates.later.x_months", { count: gapMonths });
-  } else {
-    const gapYears = Math.round(daysSince / 365);
-    return I18n.t("dates.later.x_years", { count: gapYears });
-  }
-}
-
-export default createWidget("time-gap", {
-  tagName: "div.time-gap.small-action",
-
-  html(attrs) {
-    return [
-      h("div.topic-avatar", ""),
-      h("div.small-action-desc.timegap", description(attrs)),
-    ];
-  },
-});

app/assets/javascripts/discourse/tests/integration/components/time-gap-test.js

@@ -0,0 +1,40 @@
+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 I18n from "discourse-i18n";
+
+module("Integration | Component | time-gap", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders days correctly", async function (assert) {
+    this.set("daysSince", 5);
+    await render(hbs`<TimeGap @daysSince={{this.daysSince}} />`);
+    assert
+      .dom(".small-action-desc.timegap")
+      .hasText(I18n.t("dates.later.x_days", { count: 5 }));
+  });
+
+  test("it renders months correctly", async function (assert) {
+    this.set("daysSince", 90);
+    await render(hbs`<TimeGap @daysSince={{this.daysSince}} />`);
+    assert
+      .dom(".small-action-desc.timegap")
+      .hasText(I18n.t("dates.later.x_months", { count: 3 }));
+  });
+
+  test("it renders years correctly", async function (assert) {
+    this.set("daysSince", 730);
+    await render(hbs`<TimeGap @daysSince={{this.daysSince}} />`);
+    assert
+      .dom(".small-action-desc.timegap")
+      .hasText(I18n.t("dates.later.x_years", { count: 2 }));
+  });
+
+  test("it renders the correct elements", async function (assert) {
+    this.set("daysSince", 10);
+    await render(hbs`<TimeGap @daysSince={{this.daysSince}} />`);
+    assert.dom(".topic-avatar").exists();
+    assert.dom(".small-action-desc.timegap").exists();
+  });
+});