REFACTOR: channel retention reminder text (#20310)

- Moves logic into one specialised component
- Adds more tests
- Removes duplicate key
- Uses pluralization
- Handles 0 case properly

Co-authored-by: Gerhard Schlager <mail@gerhard-schlager.at>

plugins/chat/assets/javascripts/discourse/components/chat-channel-settings-view.hbs

@@ -60,10 +60,7 @@
   {{/unless}}
   <div class="chat-retention-info">
     {{d-icon "info-circle"}}
-    {{i18n
+    <ChatRetentionReminderText @channel={{this.channel}} />
-      "chat.settings.retention_info"
-      days=this.siteSettings.chat_channel_retention_days
-    }}
   </div>
 </div>
 

plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder-text.hbs

@@ -0,0 +1,3 @@
+<span class="chat-retention-reminder-text">
+  {{this.text}}
+</span>

plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder-text.js

@@ -0,0 +1,33 @@
+import Component from "@glimmer/component";
+import I18n from "I18n";
+import { inject as service } from "@ember/service";
+
+export default class ChatRetentionReminderText extends Component {
+  @service siteSettings;
+
+  get text() {
+    if (this.args.channel.isDirectMessageChannel) {
+      if (this.#countForChannelType > 0) {
+        return I18n.t("chat.retention_reminders.dm", {
+          count: this.siteSettings.chat_dm_retention_days,
+        });
+      } else {
+        return I18n.t("chat.retention_reminders.dm_none");
+      }
+    } else {
+      if (this.#countForChannelType > 0) {
+        return I18n.t("chat.retention_reminders.public", {
+          count: this.siteSettings.chat_channel_retention_days,
+        });
+      } else {
+        return I18n.t("chat.retention_reminders.public_none");
+      }
+    }
+  }
+
+  get #countForChannelType() {
+    return this.args.channel.isDirectMessageChannel
+      ? this.siteSettings.chat_dm_retention_days
+      : this.siteSettings.chat_channel_retention_days;
+  }
+}

plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.hbs

@@ -1,9 +1,9 @@
 {{#if this.show}}
   <div class="chat-retention-reminder">
-    <span class="chat-retention-reminder-text">{{this.text}}</span>
+    <ChatRetentionReminderText @channel={{this.chatChannel}} />
     <DButton
       @class="btn-flat dismiss-btn"
-      @action={{action "dismiss"}}
+      @action={{this.dismiss}}
       @icon="times"
     />
   </div>

plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.js

@@ -1,6 +1,5 @@
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
-import I18n from "I18n";
 import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
@@ -18,30 +17,11 @@ export default Component.extend({
       !this.chatChannel.isDraft &&
       ((this.chatChannel.isDirectMessageChannel &&
         this.currentUser.needs_dm_retention_reminder) ||
-        (!this.chatChannel.isDirectMessageChannel &&
+        (this.chatChannel.isCategoryChannel &&
           this.currentUser.needs_channel_retention_reminder))
     );
   },
 
-  @discourseComputed("chatChannel.chatable_type")
-  text() {
-    let days = this.siteSettings.chat_channel_retention_days;
-    let translationKey = "chat.retention_reminders.public";
-
-    if (this.chatChannel.isDirectMessageChannel) {
-      days = this.siteSettings.chat_dm_retention_days;
-      translationKey = "chat.retention_reminders.dm";
-    }
-    return I18n.t(translationKey, { days });
-  },
-
-  @discourseComputed("chatChannel.chatable_type")
-  daysCount() {
-    return this.chatChannel.isDirectMessageChannel
-      ? this.siteSettings.chat_dm_retention_days
-      : this.siteSettings.chat_channel_retention_days;
-  },
-
   @action
   dismiss() {
     return ajax("/chat/dismiss-retention-reminder", {

plugins/chat/config/locales/client.en.yml

@@ -343,7 +343,6 @@ en:
         saved: "Saved"
         unfollow: "Leave"
         admin_title: "Admin"
-        retention_info: "Chat history will be saved for %{days} days."
 
       admin:
         title: "Chat"
@@ -415,8 +414,14 @@ en:
           other: "%{commaSeparatedUsernames} and %{count} others are typing"
 
       retention_reminders:
-        public: "Channel history is retained for %{days} days."
+        public_none: "Channel history is retained indefinitely."
-        dm: "Personal chat history is retained for %{days} days."
+        public:
+          one: "Channel history is retained for %{count} day."
+          other: "Channel history is retained for %{count} days."
+        dm_none: "Personal chat history is retained indefinitely."
+        dm:
+          one: "Personal chat history is retained for %{count} day."
+          other: "Personal chat history is retained for %{count} days."
 
       flags:
         off_topic: "This message is not relevant to the current discussion as defined by the channel title, and should probably be moved elsewhere."

plugins/chat/test/javascripts/components/chat-channel-settings-view-test.js

@@ -0,0 +1,25 @@
+import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import I18n from "I18n";
+import { module, test } from "qunit";
+import { render } from "@ember/test-helpers";
+
+module(
+  "Discourse Chat | Component | chat-channel-settings-view",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("display retention info", async function (assert) {
+      this.set("channel", ChatChannel.create({ chatable_type: "Category" }));
+
+      await render(hbs`<ChatChannelSettingsView @channel={{this.channel}} />`);
+
+      assert.dom(".chat-retention-info").hasText(
+        I18n.t("chat.retention_reminders.public", {
+          count: this.siteSettings.chat_channel_retention_days,
+        })
+      );
+    });
+  }
+);

plugins/chat/test/javascripts/components/chat-retention-reminder-test.js

@@ -1,6 +1,5 @@
 import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { exists, query } from "discourse/tests/helpers/qunit-helpers";
 import hbs from "htmlbars-inline-precompile";
 import I18n from "I18n";
 import { module, test } from "qunit";
@@ -11,70 +10,19 @@ module(
   function (hooks) {
     setupRenderingTest(hooks);
 
-    test("Shows for public channels when user needs it", async function (assert) {
+    test("display retention info", async function (assert) {
-      this.set(
+      this.channel = ChatChannel.create({ chatable_type: "Category" });
-        "chatChannel",
-        ChatChannel.create({ chatable_type: "Category" })
-      );
       this.currentUser.set("needs_channel_retention_reminder", true);
-      this.siteSettings.chat_channel_retention_days = 100;
 
       await render(
-        hbs`<ChatRetentionReminder @chatChannel={{this.chatChannel}} />`
+        hbs`<ChatRetentionReminder @chatChannel={{this.channel}} />`
       );
 
-      assert.strictEqual(
+      assert.dom(".chat-retention-reminder").includesText(
-        query(".chat-retention-reminder-text").innerText.trim(),
+        I18n.t("chat.retention_reminders.public", {
-        I18n.t("chat.retention_reminders.public", { days: 100 })
+          count: this.siteSettings.chat_channel_retention_days,
+        })
       );
     });
-
-    test("Doesn't show for public channels when user has dismissed it", async function (assert) {
-      this.set(
-        "chatChannel",
-        ChatChannel.create({ chatable_type: "Category" })
-      );
-      this.currentUser.set("needs_channel_retention_reminder", false);
-      this.siteSettings.chat_channel_retention_days = 100;
-
-      await render(
-        hbs`<ChatRetentionReminder @chatChannel={{this.chatChannel}} />`
-      );
-
-      assert.false(exists(".chat-retention-reminder"));
-    });
-
-    test("Shows for direct message channels when user needs it", async function (assert) {
-      this.set(
-        "chatChannel",
-        ChatChannel.create({ chatable_type: "DirectMessage" })
-      );
-      this.currentUser.set("needs_dm_retention_reminder", true);
-      this.siteSettings.chat_dm_retention_days = 100;
-
-      await render(
-        hbs`<ChatRetentionReminder @chatChannel={{this.chatChannel}} />`
-      );
-
-      assert.strictEqual(
-        query(".chat-retention-reminder-text").innerText.trim(),
-        I18n.t("chat.retention_reminders.dm", { days: 100 })
-      );
-    });
-
-    test("Doesn't show for dm channels when user has dismissed it", async function (assert) {
-      this.set(
-        "chatChannel",
-        ChatChannel.create({ chatable_type: "DirectMessage" })
-      );
-      this.currentUser.set("needs_dm_retention_reminder", false);
-      this.siteSettings.chat_dm_retention_days = 100;
-
-      await render(
-        hbs`<ChatRetentionReminder @chatChannel={{this.chatChannel}} />`
-      );
-
-      assert.false(exists(".chat-retention-reminder"));
-    });
   }
 );

plugins/chat/test/javascripts/components/chat-retention-reminder-text-test.js

@@ -0,0 +1,54 @@
+import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import I18n from "I18n";
+import { module, test } from "qunit";
+import { render } from "@ember/test-helpers";
+
+module(
+  "Discourse Chat | Component | chat-retention-reminder-text",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("when setting is set on 0", async function (assert) {
+      this.channel = ChatChannel.create({ chatable_type: "Category" });
+      this.siteSettings.chat_channel_retention_days = 0;
+
+      await render(
+        hbs`<ChatRetentionReminderText @channel={{this.channel}} />`
+      );
+
+      assert
+        .dom(".chat-retention-reminder-text")
+        .includesText(I18n.t("chat.retention_reminders.public_none"));
+    });
+
+    test("when channel is a public channel", async function (assert) {
+      const count = 10;
+      this.channel = ChatChannel.create({ chatable_type: "Category" });
+      this.siteSettings.chat_channel_retention_days = count;
+
+      await render(
+        hbs`<ChatRetentionReminderText @channel={{this.channel}} />`
+      );
+
+      assert
+        .dom(".chat-retention-reminder-text")
+        .includesText(I18n.t("chat.retention_reminders.public", { count }));
+    });
+
+    test("when channel is a DM channel", async function (assert) {
+      const count = 10;
+      this.channel = ChatChannel.create({ chatable_type: "DirectMessage" });
+      this.siteSettings.chat_dm_retention_days = count;
+
+      await render(
+        hbs`<ChatRetentionReminderText @channel={{this.channel}} />`
+      );
+
+      assert
+        .dom(".chat-retention-reminder-text")
+        .includesText(I18n.t("chat.retention_reminders.dm", { count }));
+    });
+  }
+);