From 486edb845c4d8b144c0ba28c6cfc0c5b1119d0b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Saquetim?=
 <1108771+megothss@users.noreply.github.com>
Date: Fri, 23 Jun 2023 16:51:59 -0300
Subject: [PATCH] DEV: Added data attributes to identify the user settings in
 the UI (#22261)

This commit adds data attributes to identify the controls in the user settings UI.

Plugins and TCs can use this information to target each setting to highlight or hide
them.

Although most of the settings also have specific classes identifying them, using data
attributes is more future proof as it is less likely to change them classes, specially
as we increase the adoption of the BEM methodology in CSS.

Using data attributes also are semantically correct as the setting name is data not really related to the classes used.
---
 .../components/user-notification-schedule.hbs |  5 +-
 .../app/templates/preferences/account.hbs     | 29 ++++++---
 .../app/templates/preferences/emails.hbs      | 32 +++++++---
 .../app/templates/preferences/interface.hbs   | 35 +++++++---
 .../templates/preferences/navigation-menu.hbs | 15 ++++-
 .../templates/preferences/notifications.hbs   | 10 ++-
 .../app/templates/preferences/profile.hbs     | 21 +++---
 .../app/templates/preferences/security.hbs    | 12 +++-
 .../app/templates/preferences/tracking.hbs    | 15 ++++-
 .../app/templates/preferences/users.hbs       | 64 +++++++++++--------
 10 files changed, 162 insertions(+), 76 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/user-notification-schedule.hbs b/app/assets/javascripts/discourse/app/components/user-notification-schedule.hbs
index 56cfd657be8..8b08f2ada1c 100644
--- a/app/assets/javascripts/discourse/app/components/user-notification-schedule.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-notification-schedule.hbs
@@ -1,4 +1,7 @@
-<div class="control-group notification-schedule">
+<div
+  class="control-group notification-schedule"
+  data-setting-name="user-notification-schedule"
+>
   <label class="control-label">{{i18n
       "user.notification_schedule.title"
     }}</label>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/account.hbs b/app/assets/javascripts/discourse/app/templates/preferences/account.hbs
index 400654ac0ae..df67088fda1 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/account.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/account.hbs
@@ -1,10 +1,10 @@
-<div class="control-group pref-username">
+<div class="control-group pref-username" data-setting-name="user-username">
   <label class="control-label">{{i18n "user.username.title"}}</label>
   <UsernamePreference @user={{this.model}} />
 </div>
 
 {{#unless this.siteSettings.discourse_connect_overrides_avatar}}
-  <div class="control-group pref-avatar">
+  <div class="control-group pref-avatar" data-setting-name="user-avatar">
     <label class="control-label" id="profile-picture">{{i18n
         "user.avatar.title"
       }}</label>
@@ -22,7 +22,7 @@
 {{/unless}}
 
 {{#if this.canCheckEmails}}
-  <div class="control-group pref-email">
+  <div class="control-group pref-email" data-setting-name="user-email">
     <label class="control-label">{{i18n "user.email.title"}}</label>
     {{#if this.model.email}}
       {{#if this.siteSettings.enable_secondary_emails}}
@@ -111,7 +111,10 @@
 {{/if}}
 
 {{#if this.canUpdateAssociatedAccounts}}
-  <div class="control-group pref-associated-accounts">
+  <div
+    class="control-group pref-associated-accounts"
+    data-setting-name="user-associated-accounts"
+  >
     <label class="control-label">{{i18n
         "user.associated_accounts.title"
       }}</label>
@@ -175,7 +178,7 @@
 {{/if}}
 
 {{#if this.canEditName}}
-  <div class="control-group pref-name">
+  <div class="control-group pref-name" data-setting-name="user-name">
     <label class="control-label">{{i18n "user.name.title"}}</label>
     <div class="controls">
       {{#if this.model.can_edit_name}}
@@ -195,7 +198,7 @@
 {{/if}}
 
 {{#if this.canSelectTitle}}
-  <div class="control-group pref-title">
+  <div class="control-group pref-title" data-setting-name="user-title">
     <label class="control-label">{{i18n "user.title.title"}}</label>
     <div class="controls">
       <ComboBox
@@ -212,7 +215,7 @@
 {{/if}}
 
 {{#if this.canSelectFlair}}
-  <div class="control-group pref-flair">
+  <div class="control-group pref-flair" data-setting-name="user-flair">
     <label class="control-label">{{i18n "user.flair.title"}}</label>
     <div class="controls">
       <FlairChooser
@@ -229,7 +232,7 @@
 {{/if}}
 
 {{#if this.canSelectUserStatus}}
-  <div class="control-group pref-user-status">
+  <div class="control-group pref-user-status" data-setting-name="user-status">
     <label class="control-label">{{i18n "user.status.title"}}</label>
     <div class="controls">
       {{#if this.newStatus}}
@@ -251,7 +254,10 @@
 {{/if}}
 
 {{#if this.canSelectPrimaryGroup}}
-  <div class="control-group pref-primary-group">
+  <div
+    class="control-group pref-primary-group"
+    data-setting-name="user-primary-group"
+  >
     <label class="control-label">{{i18n "user.primary_group.title"}}</label>
     <div class="controls">
       <ComboBox
@@ -264,7 +270,10 @@
 {{/if}}
 
 {{#if this.canDownloadPosts}}
-  <div class="control-group pref-data-export">
+  <div
+    class="control-group pref-data-export"
+    data-setting-name="user-data-export"
+  >
     <label class="control-label">{{i18n "user.download_archive.title"}}</label>
     <div class="controls">
       <DButton
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/emails.hbs b/app/assets/javascripts/discourse/app/templates/preferences/emails.hbs
index ebf458a7e53..08cd30b2a1f 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/emails.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/emails.hbs
@@ -8,7 +8,10 @@
 <div class="control-group pref-email-settings">
   <label class="control-label">{{i18n "user.email_settings"}}</label>
 
-  <div class="controls controls-dropdown">
+  <div
+    class="controls controls-dropdown"
+    data-setting-name="user-email-messages-level"
+  >
     <label for="user-email-messages-level">{{i18n
         "user.email_messages_level"
       }}</label>
@@ -24,7 +27,7 @@
     {{/if}}
   </div>
 
-  <div class="controls controls-dropdown">
+  <div class="controls controls-dropdown" data-setting-name="user-email-level">
     <label for="user-email-level">{{i18n "user.email_level.title"}}</label>
     <ComboBox
       @valueProperty="value"
@@ -38,7 +41,10 @@
     {{/if}}
   </div>
 
-  <div class="controls controls-dropdown">
+  <div
+    class="controls controls-dropdown"
+    data-setting-name="user-email-previous-replies"
+  >
     <label>{{i18n "user.email_previous_replies.title"}}</label>
     <ComboBox
       @valueProperty="value"
@@ -48,6 +54,7 @@
     />
   </div>
   <PreferenceCheckbox
+    data-setting-name="user-email-in-reply-to"
     @labelKey="user.email_in_reply_to"
     @checked={{this.model.user_option.email_in_reply_to}}
   />
@@ -65,12 +72,16 @@
   <div class="control-group pref-activity-summary">
     <label class="control-label">{{i18n "user.email_activity_summary"}}</label>
     <PreferenceCheckbox
+      data-setting-name="user-email-digests"
       @labelKey="user.email_digests.title"
       @disabled={{this.model.user_option.mailing_list_mode}}
       @checked={{this.model.user_option.email_digests}}
     />
     {{#if this.model.user_option.email_digests}}
-      <div class="controls controls-dropdown">
+      <div
+        class="controls controls-dropdown"
+        data-setting-name="user-email-digests-frequency"
+      >
         <ComboBox
           @valueProperty="value"
           @content={{this.digestFrequencies}}
@@ -80,6 +91,7 @@
         />
       </div>
       <PreferenceCheckbox
+        data-setting-name="user-include-tl0-in-digests"
         @labelKey="user.include_tl0_in_digests"
         @disabled={{this.model.user_option.mailing_list_mode}}
         @checked={{this.model.user_option.include_tl0_in_digests}}
@@ -92,14 +104,18 @@
   <div class="control-group pref-mailing-list-mode">
     <label class="control-label">{{i18n "user.mailing_list_mode.label"}}</label>
     <PreferenceCheckbox
+      data-setting-name="user-mailing-list-mode-enabled"
       @labelKey="user.mailing_list_mode.enabled"
       @checked={{this.model.user_option.mailing_list_mode}}
     />
-    <div class="instructions">{{html-safe
-        (i18n "user.mailing_list_mode.instructions")
-      }}</div>
+    <div class="instructions">
+      {{html-safe (i18n "user.mailing_list_mode.instructions")}}
+    </div>
     {{#if this.model.user_option.mailing_list_mode}}
-      <div class="controls controls-dropdown">
+      <div
+        class="controls controls-dropdown"
+        data-setting-name="user-mailing-list-mode-options"
+      >
         <ComboBox
           @valueProperty="value"
           @content={{this.mailingListModeOptions}}
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs b/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs
index 9a5ac5a2c07..1c1d072c337 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs
@@ -7,7 +7,7 @@
 </span>
 
 {{#if this.showThemeSelector}}
-  <div class="control-group theme">
+  <div class="control-group theme" data-setting-name="user-theme">
     <label class="control-label">{{i18n "user.theme"}}</label>
     <div class="controls">
       <ComboBox
@@ -33,7 +33,10 @@
 {{/if}}
 
 {{#if this.showColorSchemeSelector}}
-  <fieldset class="control-group color-scheme">
+  <fieldset
+    class="control-group color-scheme"
+    data-setting-name="user-color-scheme"
+  >
     <legend class="control-label">{{i18n "user.color_scheme"}}</legend>
     <div class="controls">
       <div class="control-subgroup light-color-scheme">
@@ -90,7 +93,7 @@
 {{/if}}
 
 {{#if this.showDarkModeToggle}}
-  <div class="control-group dark-mode">
+  <div class="control-group dark-mode" data-setting-name="user-dark-mode">
     <label class="control-label">{{i18n "user.dark_mode"}}</label>
     <div class="controls">
       <PreferenceCheckbox
@@ -101,7 +104,7 @@
   </div>
 {{/if}}
 
-<div class="control-group text-size">
+<div class="control-group text-size" data-setting-name="user-text-size">
   <label for="text-size-selector" class="control-label">{{i18n
       "user.text_size.title"
     }}</label>
@@ -125,7 +128,7 @@
 </div>
 
 {{#if this.siteSettings.allow_user_locale}}
-  <div class="control-group pref-locale">
+  <div class="control-group pref-locale" data-setting-name="user-locale">
     <label for="locale-selector" class="control-label">{{i18n
         "user.locale.title"
       }}</label>
@@ -146,7 +149,7 @@
   </div>
 {{/if}}
 
-<div class="control-group home">
+<div class="control-group home" data-setting-name="user-home">
   <label for="home-selector" class="control-label">{{i18n "user.home"}}</label>
   <div class="controls">
     <ComboBox
@@ -159,29 +162,33 @@
   </div>
 </div>
 
-<fieldset class="control-group other">
+<fieldset class="control-group other" data-setting-name="user-other-settings">
   <legend class="control-label">{{i18n "user.other_settings"}}</legend>
 
   <PreferenceCheckbox
     @labelKey="user.external_links_in_new_tab"
     @checked={{this.model.user_option.external_links_in_new_tab}}
     @class="pref-external-links"
+    data-setting-name="user-external-links"
   />
   <PreferenceCheckbox
     @labelKey="user.enable_quoting"
     @checked={{this.model.user_option.enable_quoting}}
     @class="pref-enable-quoting"
+    data-setting-name="user-enable-quoting"
   />
   <PreferenceCheckbox
     @labelKey="user.enable_defer"
     @checked={{this.model.user_option.enable_defer}}
     @class="pref-defer-unread"
+    data-setting-name="user-enable-defer"
   />
   {{#if this.siteSettings.automatically_unpin_topics}}
     <PreferenceCheckbox
       @labelKey="user.automatically_unpin_topics"
       @checked={{this.model.user_option.automatically_unpin_topics}}
       @class="pref-auto-unpin"
+      data-setting-name="user-auto-unpin"
     />
   {{/if}}
   {{#if this.siteSettings.allow_users_to_hide_profile}}
@@ -189,14 +196,19 @@
       @labelKey="user.hide_profile_and_presence"
       @checked={{this.model.user_option.hide_profile_and_presence}}
       @class="pref-hide-profile"
+      data-setting-name="user-hide-profile"
     />
   {{/if}}
   <PreferenceCheckbox
     @labelKey="user.dynamic_favicon"
     @checked={{this.model.user_option.dynamic_favicon}}
     @class="pref-dynamic-favicon"
+    data-setting-name="user-dynamic-favicon"
   />
-  <div class="controls controls-dropdown pref-page-title">
+  <div
+    class="controls controls-dropdown pref-page-title"
+    data-setting-name="user-page-title"
+  >
     <label for="user-title-count-mode">{{i18n
         "user.title_count_mode.title"
       }}</label>
@@ -208,7 +220,10 @@
       @onChange={{action (mut this.model.user_option.title_count_mode)}}
     />
   </div>
-  <div class="controls controls-dropdown pref-bookmark-after-notification">
+  <div
+    class="controls controls-dropdown pref-bookmark-after-notification"
+    data-setting-name="user-bookmark-after-notification"
+  >
     <label for="bookmark-after-notification-mode">{{i18n
         "user.bookmark_after_notification.title"
       }}</label>
@@ -226,11 +241,13 @@
     @labelKey="user.skip_new_user_tips.description"
     @checked={{this.model.user_option.skip_new_user_tips}}
     @class="pref-new-user-tips"
+    data-setting-name="user-new-user-tips"
   />
   {{#if this.site.user_tips}}
     <DButton
       @class="pref-reset-seen-user-tips"
       @action={{action "resetSeenUserTips"}}
+      data-setting-name="user-reset-seen-user-tips"
     >{{i18n "user.reset_seen_user_tips"}}</DButton>
   {{/if}}
 </fieldset>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/navigation-menu.hbs b/app/assets/javascripts/discourse/app/templates/preferences/navigation-menu.hbs
index ce03f6496e5..a1aab208b4d 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/navigation-menu.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/navigation-menu.hbs
@@ -1,4 +1,7 @@
-<div class="control-group preferences-navigation-menu-categories">
+<div
+  class="control-group preferences-navigation-menu-categories"
+  data-setting-name="user-navigation-menu-categories"
+>
   <legend class="control-label">{{i18n
       "user.experimental_sidebar.categories_section"
     }}</legend>
@@ -20,7 +23,10 @@
 </div>
 
 {{#if this.model.display_sidebar_tags}}
-  <div class="control-group preferences-navigation-menu-tags">
+  <div
+    class="control-group preferences-navigation-menu-tags"
+    data-setting-name="user-navigation-menu-tags"
+  >
     <legend class="control-label">{{i18n
         "user.experimental_sidebar.tags_section"
       }}</legend>
@@ -41,7 +47,10 @@
   </div>
 {{/if}}
 
-<div class="control-group preferences-navigation-menu-navigation">
+<div
+  class="control-group preferences-navigation-menu-navigation"
+  data-setting-name="user-navigation-menu-navigation"
+>
   <legend class="control-label">{{i18n
       "user.experimental_sidebar.navigation_section"
     }}</legend>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/notifications.hbs b/app/assets/javascripts/discourse/app/templates/preferences/notifications.hbs
index 28e0a7355d3..6b0f382fb1f 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/notifications.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/notifications.hbs
@@ -1,7 +1,10 @@
 <div class="control-group notifications">
   <label class="control-label">{{i18n "user.notifications"}}</label>
 
-  <div class="controls controls-dropdown">
+  <div
+    class="controls controls-dropdown"
+    data-setting-name="user-like-notification-frequency"
+  >
     <label>{{i18n "user.like_notification_frequency.title"}}</label>
     <ComboBox
       @valueProperty="value"
@@ -15,7 +18,10 @@
 </div>
 
 {{#unless this.capabilities.isAppWebview}}
-  <div class="control-group desktop-notifications">
+  <div
+    class="control-group desktop-notifications"
+    data-setting-name="user-desktop-notifications"
+  >
     <label class="control-label">{{i18n
         "user.desktop_notifications.label"
       }}</label>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/profile.hbs b/app/assets/javascripts/discourse/app/templates/preferences/profile.hbs
index 8d4021793fd..b87f0754a5d 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/profile.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/profile.hbs
@@ -1,5 +1,5 @@
 {{#if this.canChangeBio}}
-  <div class="control-group pref-bio">
+  <div class="control-group pref-bio" data-setting-name="user-bio">
     <label class="control-label">{{i18n "user.bio"}}</label>
     <div class="controls bio-composer input-xxlarge">
       <DEditor @value={{this.model.bio_raw}} />
@@ -7,7 +7,7 @@
   </div>
 {{/if}}
 
-<div class="control-group pref-timezone">
+<div class="control-group pref-timezone" data-setting-name="user-timezone">
   <label class="control-label">{{i18n "user.timezone"}}</label>
   <TimezoneInput
     @value={{this.model.user_option.timezone}}
@@ -23,7 +23,7 @@
 </div>
 
 {{#if this.model.can_change_location}}
-  <div class="control-group pref-location">
+  <div class="control-group pref-location" data-setting-name="user-location">
     <label class="control-label" for="edit-location">{{i18n
         "user.location"
       }}</label>
@@ -39,7 +39,7 @@
 {{/if}}
 
 {{#if this.model.can_change_website}}
-  <div class="control-group pref-website">
+  <div class="control-group pref-website" data-setting-name="user-website">
     <label class="control-label" for="edit-website">{{i18n
         "user.website"
       }}</label>
@@ -55,7 +55,7 @@
 {{/if}}
 
 {{#each this.userFields as |uf|}}
-  <div class="control-group">
+  <div class="control-group" data-setting-name="user-user-fields">
     <UserField @field={{uf.field}} @value={{uf.value}} />
   </div>
 {{/each}}
@@ -63,7 +63,10 @@
 
 {{#if this.siteSettings.allow_profile_backgrounds}}
   {{#if this.canUploadProfileHeader}}
-    <div class="control-group pref-profile-bg">
+    <div
+      class="control-group pref-profile-bg"
+      data-setting-name="user-profile-bg"
+    >
       <label class="control-label">{{i18n
           "user.change_profile_background.title"
         }}</label>
@@ -80,7 +83,7 @@
     </div>
   {{/if}}
   {{#if this.canUploadUserCardBackground}}
-    <div class="control-group pref-profile-bg">
+    <div class="control-group pref-profile-bg" data-setting-name="user-card-bg">
       <label class="control-label">{{i18n
           "user.change_card_background.title"
         }}</label>
@@ -99,7 +102,7 @@
 {{/if}}
 
 {{#if this.siteSettings.allow_featured_topic_on_user_profiles}}
-  <div class="control-group">
+  <div class="control-group" data-setting-name="user-featured-topic">
     <label class="control-label">{{i18n "user.featured_topic"}}</label>
     {{#if this.model.featured_topic}}
       <label class="featured-topic-link">
@@ -136,7 +139,7 @@
 {{/if}}
 
 {{#if this.canChangeDefaultCalendar}}
-  <div class="control-group">
+  <div class="control-group" data-setting-name="user-default-calendar">
     <label class="control-label">{{i18n
         "download_calendar.default_calendar"
       }}</label>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/security.hbs b/app/assets/javascripts/discourse/app/templates/preferences/security.hbs
index e911c54154a..41fe1a92bbe 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/security.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/security.hbs
@@ -1,5 +1,5 @@
 {{#if this.canChangePassword}}
-  <div class="control-group pref-password">
+  <div class="control-group pref-password" data-setting-name="user-password">
     <label class="control-label">{{i18n "user.password.title"}}</label>
     <div class="controls">
       <a href {{on "click" this.changePassword}} class="btn btn-default">
@@ -15,7 +15,10 @@
     </div>
   </div>
 
-  <div class="control-group pref-second-factor">
+  <div
+    class="control-group pref-second-factor"
+    data-setting-name="user-second-factor"
+  >
     <label class="control-label">{{i18n "user.second_factor.title"}}</label>
     {{#unless this.model.second_factor_enabled}}
       <label>
@@ -34,7 +37,10 @@
 {{/if}}
 
 {{#if this.canCheckEmails}}
-  <div class="control-group pref-auth-tokens">
+  <div
+    class="control-group pref-auth-tokens"
+    data-setting-name="user-auth-tokens"
+  >
     <label class="control-label">{{i18n "user.auth_tokens.title"}}</label>
 
     <div class="auth-tokens">
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/tracking.hbs b/app/assets/javascripts/discourse/app/templates/preferences/tracking.hbs
index 348083f11a7..5c95660f7de 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/tracking.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/tracking.hbs
@@ -4,7 +4,10 @@
   <label class="control-label">{{i18n "user.topics_settings"}}</label>
 
   <div class="user-preferences_tracking-topics-controls">
-    <div class="controls controls-dropdown">
+    <div
+      class="controls controls-dropdown"
+      data-setting-name="user-new-topic-duration"
+    >
       <label>{{i18n "user.new_topic_duration.label"}}</label>
       <ComboBox
         @class="duration"
@@ -17,7 +20,10 @@
       />
     </div>
 
-    <div class="controls controls-dropdown">
+    <div
+      class="controls controls-dropdown"
+      data-setting-name="user-auto-track-topics"
+    >
       <label>{{i18n "user.auto_track_topics"}}</label>
       <ComboBox
         @valueProperty="value"
@@ -29,7 +35,10 @@
       />
     </div>
 
-    <div class="controls controls-dropdown">
+    <div
+      class="controls controls-dropdown"
+      data-setting-name="user-notification-level-when-replying"
+    >
       <label>{{i18n "user.notification_level_when_replying"}}</label>
       <ComboBox
         @valueProperty="value"
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/users.hbs b/app/assets/javascripts/discourse/app/templates/preferences/users.hbs
index 09178114bb9..6ffb37ffaaa 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/users.hbs
@@ -1,6 +1,6 @@
 <label class="control-label">{{i18n "user.users"}}</label>
 {{#if this.ignoredEnabled}}
-  <div class="control-group user-ignore">
+  <div class="control-group user-ignore" data-setting-name="user-ignored-users">
     <div class="controls tracking-controls user-notifications">
       <label>{{d-icon "far-eye-slash" class="icon"}}
         {{i18n "user.ignored_users"}}</label>
@@ -13,7 +13,7 @@
   </div>
 {{/if}}
 
-<div class="control-group user-mute">
+<div class="control-group user-mute" data-setting-name="user-muted-users">
   <div class="controls tracking-controls">
     <label>
       {{d-icon "d-muted" class="icon"}}
@@ -31,34 +31,42 @@
 {{#if this.currentUser.can_send_private_messages}}
   <div class="control-group private-messages">
     <label class="control-label">{{i18n "user.private_messages"}}</label>
-    <div class="controls">
-      <PreferenceCheckbox
-        @labelKey="user.allow_private_messages"
-        @checked={{this.model.user_option.allow_private_messages}}
-      />
-    </div>
-  </div>
-
-  <div class="control-group user-allow-pm">
-    <div class="controls">
-      <PreferenceCheckbox
-        @labelKey="user.allow_private_messages_from_specific_users"
-        @checked={{this.model.user_option.enable_allowed_pm_users}}
-        @disabled={{this.disableAllowPmUsersSetting}}
-      />
-    </div>
-    {{#if this.allowPmUsersEnabled}}
-      <div class="controls tracking-controls">
-        <UserChooser
-          @value={{this.allowedPmUsernames}}
-          @onChange={{action "onChangeAllowedPmUsernames"}}
-          @options={{hash excludeCurrentUser=true}}
+    <div
+      class="control-group user-allow-pm"
+      data-setting-name="user-allow-private-messages"
+    >
+      <div class="controls">
+        <PreferenceCheckbox
+          @labelKey="user.allow_private_messages"
+          @checked={{this.model.user_option.allow_private_messages}}
         />
       </div>
-      <div class="instructions">{{i18n
-          "user.allowed_pm_users_instructions"
-        }}</div>
-    {{/if}}
+    </div>
+
+    <div
+      class="control-group user-allow-pm"
+      data-setting-name="user-allow-private-messages-from-specific-users"
+    >
+      <div class="controls">
+        <PreferenceCheckbox
+          @labelKey="user.allow_private_messages_from_specific_users"
+          @checked={{this.model.user_option.enable_allowed_pm_users}}
+          @disabled={{this.disableAllowPmUsersSetting}}
+        />
+      </div>
+      {{#if this.allowPmUsersEnabled}}
+        <div class="controls tracking-controls">
+          <UserChooser
+            @value={{this.allowedPmUsernames}}
+            @onChange={{action "onChangeAllowedPmUsernames"}}
+            @options={{hash excludeCurrentUser=true}}
+          />
+        </div>
+        <div class="instructions">{{i18n
+            "user.allowed_pm_users_instructions"
+          }}</div>
+      {{/if}}
+    </div>
   </div>
 {{/if}}