UX: improves reminder setting text (#23918)

The setting will change from "%{count} days" to "Chat settings have been set to retain channel messages for %{count} day."

This commit also:
- migrates `chat-retention-reminder` to gjs
- adds a "type" property to `chat-retention-reminder-text` to allow use a long or short text depending on where it's used.

plugins/chat/assets/javascripts/discourse/components/chat-channel-settings.gjs

@@ -443,7 +443,7 @@ export default class ChatAboutScreen extends Component {
           {{/if}}
 
           <section.row @label={{this.historyLabel}}>
-            <ChatRetentionReminderText @channel={{@channel}} />
+            <ChatRetentionReminderText @channel={{@channel}} @type="short" />
           </section.row>
         </form.section>
 

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

@@ -5,22 +5,26 @@ import I18n from "I18n";
 export default class ChatRetentionReminderText extends Component {
   @service siteSettings;
 
+  get type() {
+    return this.args.type ?? "long";
+  }
+
   get text() {
     if (this.args.channel.isDirectMessageChannel) {
       if (this.#countForChannelType > 0) {
-        return I18n.t("chat.retention_reminders.dm", {
+        return I18n.t(`chat.retention_reminders.${this.type}`, {
           count: this.siteSettings.chat_dm_retention_days,
         });
       } else {
-        return I18n.t("chat.retention_reminders.dm_none");
+        return I18n.t(`chat.retention_reminders.indefinitely_${this.type}`);
       }
     } else {
       if (this.#countForChannelType > 0) {
-        return I18n.t("chat.retention_reminders.public", {
+        return I18n.t(`chat.retention_reminders.${this.type}`, {
           count: this.siteSettings.chat_channel_retention_days,
         });
       } else {
-        return I18n.t("chat.retention_reminders.public_none");
+        return I18n.t(`chat.retention_reminders.indefinitely_${this.type}`);
       }
     }
   }

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

@@ -0,0 +1,49 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import ChatRetentionReminderText from "discourse/plugins/chat/discourse/components/chat-retention-reminder-text";
+
+export default class ChatRetentionReminder extends Component {
+  @service currentUser;
+
+  get show() {
+    return (
+      (this.args.channel?.isDirectMessageChannel &&
+        this.currentUser?.get("needs_dm_retention_reminder")) ||
+      (this.args.channel?.isCategoryChannel &&
+        this.currentUser?.get("needs_channel_retention_reminder"))
+    );
+  }
+
+  @action
+  async dismiss() {
+    try {
+      await ajax("/chat/dismiss-retention-reminder", {
+        method: "POST",
+        data: { chatable_type: this.args.channel.chatableType },
+      });
+      const field = this.args.channel.isDirectMessageChannel
+        ? "needs_dm_retention_reminder"
+        : "needs_channel_retention_reminder";
+      this.currentUser.set(field, false);
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  <template>
+    {{#if this.show}}
+      <div class="chat-retention-reminder">
+        <ChatRetentionReminderText @channel={{@channel}} />
+        <DButton
+          @action={{this.dismiss}}
+          @icon="times"
+          class="btn-flat dismiss-btn"
+        />
+      </div>
+    {{/if}}
+  </template>
+}

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

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

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

@@ -1,33 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
-import { ajax } from "discourse/lib/ajax";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-
-export default class ChatRetentionReminder extends Component {
-  @service currentUser;
-
-  get show() {
-    return (
-      (this.args.channel?.isDirectMessageChannel &&
-        this.currentUser?.get("needs_dm_retention_reminder")) ||
-      (this.args.channel?.isCategoryChannel &&
-        this.currentUser?.get("needs_channel_retention_reminder"))
-    );
-  }
-
-  @action
-  dismiss() {
-    return ajax("/chat/dismiss-retention-reminder", {
-      method: "POST",
-      data: { chatable_type: this.args.channel.chatableType },
-    })
-      .then(() => {
-        const field = this.args.channel.isDirectMessageChannel
-          ? "needs_dm_retention_reminder"
-          : "needs_channel_retention_reminder";
-        this.currentUser.set(field, false);
-      })
-      .catch(popupAjaxError);
-  }
-}

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

@@ -542,14 +542,14 @@ en:
           other: "%{commaSeparatedUsernames} and %{count} others are typing"
 
       retention_reminders:
-        public_none: "indefinitely"
-        public:
-          one: "%{count} day"
-          other: "%{count} days"
-        dm_none: "indefinitely"
-        dm:
+        indefinitely_short: "indefinitely"
+        indefinitely_long: "Chat settings have been set to retain channel messages indefinitely."
+        short:
           one: "%{count} day"
           other: "%{count} days"
+        long:
+          one: "Chat settings have been set to retain channel messages for %{count} day."
+          other: "Chat settings have been set to retain channel messages 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-retention-reminder-test.js

@@ -17,7 +17,22 @@ module(
       await render(hbs`<ChatRetentionReminder @channel={{this.channel}} />`);
 
       assert.dom(".chat-retention-reminder").includesText(
-        I18n.t("chat.retention_reminders.public", {
+        I18n.t("chat.retention_reminders.long", {
+          count: this.siteSettings.chat_channel_retention_days,
+        })
+      );
+    });
+
+    test("@type=short", async function (assert) {
+      this.channel = ChatChannel.create({ chatable_type: "Category" });
+      this.currentUser.set("needs_channel_retention_reminder", true);
+
+      await render(
+        hbs`<ChatRetentionReminder @channel={{this.channel}} @type="short" />`
+      );
+
+      assert.dom(".chat-retention-reminder").includesText(
+        I18n.t("chat.retention_reminders.short", {
           count: this.siteSettings.chat_channel_retention_days,
         })
       );

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

@@ -20,7 +20,15 @@ module(
 
       assert
         .dom(".chat-retention-reminder-text")
-        .includesText(I18n.t("chat.retention_reminders.public_none"));
+        .includesText(I18n.t("chat.retention_reminders.indefinitely_long"));
+
+      await render(
+        hbs`<ChatRetentionReminderText @channel={{this.channel}} @type="short" />`
+      );
+
+      assert
+        .dom(".chat-retention-reminder-text")
+        .includesText(I18n.t("chat.retention_reminders.indefinitely_short"));
     });
 
     test("when channel is a public channel", async function (assert) {
@@ -34,7 +42,15 @@ module(
 
       assert
         .dom(".chat-retention-reminder-text")
-        .includesText(I18n.t("chat.retention_reminders.public", { count }));
+        .includesText(I18n.t("chat.retention_reminders.long", { count }));
+
+      await render(
+        hbs`<ChatRetentionReminderText @channel={{this.channel}} @type="short" />`
+      );
+
+      assert
+        .dom(".chat-retention-reminder-text")
+        .includesText(I18n.t("chat.retention_reminders.short", { count }));
     });
 
     test("when channel is a DM channel", async function (assert) {
@@ -48,7 +64,15 @@ module(
 
       assert
         .dom(".chat-retention-reminder-text")
-        .includesText(I18n.t("chat.retention_reminders.dm", { count }));
+        .includesText(I18n.t("chat.retention_reminders.long", { count }));
+
+      await render(
+        hbs`<ChatRetentionReminderText @channel={{this.channel}} @type="short" />`
+      );
+
+      assert
+        .dom(".chat-retention-reminder-text")
+        .includesText(I18n.t("chat.retention_reminders.short", { count }));
     });
   }
 );