UX: redesign of chat settings + add chat retention info (#19017)

* UX: redesign of chat settings

plugins/chat/app/jobs/regular/auto_join_channel_batch.rb

@@ -1,3 +1,4 @@
+# NOTE: When changing auto-join logic, make sure to update the `settings.auto_join_users_info` translation as well.
 # frozen_string_literal: true
 
 module Jobs

plugins/chat/app/jobs/regular/auto_manage_channel_memberships.rb

@@ -1,3 +1,4 @@
+# NOTE: When changing auto-join logic, make sure to update the `settings.auto_join_users_info` translation as well.
 # frozen_string_literal: true
 
 module Jobs

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

@@ -18,6 +18,11 @@ const MUTED_OPTIONS = [
   { name: I18n.t("chat.settings.muted_off"), value: false },
 ];
 
+const AUTO_ADD_USERS_OPTIONS = [
+  { name: I18n.t("chat.settings.enable_auto_join_users"), value: true },
+  { name: I18n.t("chat.settings.disable_auto_join_users"), value: false },
+];
+
 export default class ChatChannelSettingsView extends Component {
   @service chat;
   @service router;
@@ -27,6 +32,7 @@ export default class ChatChannelSettingsView extends Component {
 
   notificationLevels = NOTIFICATION_LEVELS;
   mutedOptions = MUTED_OPTIONS;
+  autoAddUsersOptions = AUTO_ADD_USERS_OPTIONS;
   isSavingNotificationSetting = false;
   savedDesktopNotificationLevel = false;
   savedMobileNotificationLevel = false;
@@ -119,11 +125,18 @@ export default class ChatChannelSettingsView extends Component {
   }
 
   @action
+  onToggleAutoJoinUsers() {
+    if (!this.channel.auto_join_users) {
+      this.onEnableAutoJoinUsers();
+    } else {
+      this.onDisableAutoJoinUsers();
+    }
+  }
+
   onDisableAutoJoinUsers() {
     this._updateAutoJoinUsers(false);
   }
 
-  @action
   onEnableAutoJoinUsers() {
     this.dialog.confirm({
       message: I18n.t("chat.settings.auto_join_users_warning", {

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

@@ -12,7 +12,6 @@
       {{/if}}
     </div>
   </div>
-
   {{#unless this.channel.current_user_membership.muted}}
     <div class="chat-form__field">
       <label class="chat-form__label">
@@ -42,17 +41,19 @@
       </div>
     </div>
   {{/unless}}
+  <div class="chat-retention-info">{{d-icon "info-circle"}}{{i18n "chat.settings.retention_info" days=this.siteSettings.chat_channel_retention_days}}</div>
 </div>
 
 {{#if (chat-guardian "can-edit-chat-channel")}}
+  <h3 class="chat-form__section-admin-title">{{i18n "chat.settings.admin_title"}}</h3>
   {{#if this.autoJoinAvailable}}
     <div class="chat-form__section">
       <div class="chat-form__field">
-        {{#if this.channel.auto_join_users}}
+        <label class="chat-form__label">
-          <DButton @action={{action "onDisableAutoJoinUsers"}} @label="chat.settings.disable_auto_join_users" @class="archive-btn chat-form__btn btn-flat" @icon="minus-circle" />
+          <span>{{i18n "chat.settings.auto_join_users_label"}}</span>
-        {{else}}
+        </label>
-          <DButton @action={{action "onEnableAutoJoinUsers"}} @label="chat.settings.enable_auto_join_users" @class="archive-btn chat-form__btn btn-flat" @icon="user-plus" />
+        <ComboBox @content={{this.autoAddUsersOptions}} @value={{this.channel.auto_join_users}} @valueProperty="value" @class="channel-settings-view__auto-join-selector" @onChange={{action (fn this.onToggleAutoJoinUsers this.channel.auto_join_users)}} />
-        {{/if}}
+        <div class="chat-form__description -autojoin">{{i18n "chat.settings.auto_join_users_info" category=this.channel.chatable.name}}</div>
       </div>
     </div>
   {{/if}}

plugins/chat/assets/stylesheets/common/chat-channel-info.scss

@@ -44,7 +44,8 @@
 
 .channel-settings-view__desktop-notification-level-selector,
 .channel-settings-view__mobile-notification-level-selector,
-.channel-settings-view__muted-selector {
+.channel-settings-view__muted-selector,
+.channel-settings-view__auto-join-selector {
   width: 220px;
 }
 

plugins/chat/assets/stylesheets/common/chat-form.scss

@@ -1,9 +1,8 @@
 .chat-form__section {
-  padding: 1.5rem 1rem;
+  margin: 1.5rem 1rem;
-  border-bottom: 1px solid var(--primary-low);
 
   &:first-child {
-    padding-top: 0;
+    margin-top: 0;
   }
 
   &:last-child {
@@ -11,6 +10,11 @@
     border-bottom: none;
   }
 }
+.chat-form__section-admin-title {
+  margin-inline: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--primary-low);
+}
 
 .chat-form__field {
   margin-bottom: 1rem;
@@ -20,6 +24,12 @@
   }
 }
 
+.chat-form__description {
+  margin-top: 3px;
+  color: var(--primary-medium);
+  font-size: var(--font-down-1);
+}
+
 .chat-form__btn {
   border: 0;
   background: none;
@@ -41,3 +51,12 @@
     font-size: var(--font-down-1);
   }
 }
+
+.chat-retention-info {
+  margin-top: 2rem;
+  color: var(--primary-high);
+
+  .d-icon {
+    margin-right: 0.5em;
+  }
+}

plugins/chat/assets/stylesheets/desktop/desktop.scss

@@ -158,3 +158,9 @@
     }
   }
 }
+
+.chat-form {
+  &__description.-autojoin {
+    max-width: 50%;
+  }
+}

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

@@ -289,8 +289,10 @@ en:
         always: "For all activity"
 
       settings:
-        enable_auto_join_users: "Automatically add all recently active users"
+        auto_join_users_label: "Automatically add users"
-        disable_auto_join_users: "Stop automatically adding users"
+        auto_join_users_info: "Check hourly which users have been active in the last 3 months and, if they have access to the %{category} category, add them to this channel."
+        enable_auto_join_users: "Yes"
+        disable_auto_join_users: "No"
         auto_join_users_warning: "Every user who isn't a member of this channel and has access to the %{category} category will join. Are you sure?"
         desktop_notification_level: "Desktop notifications"
         follow: "Join"
@@ -304,6 +306,8 @@ en:
         save: "Save"
         saved: "Saved"
         unfollow: "Leave"
+        admin_title: "Admin"
+        retention_info: "Chat history will be saved for %{days} days."
 
       admin:
         title: "Chat"