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.

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>

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

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
+    <div class="instructions">
-        (i18n "user.mailing_list_mode.instructions")
+      {{html-safe (i18n "user.mailing_list_mode.instructions")}}
-      }}</div>
+    </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}}

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>

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>

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>

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>

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">

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"

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">
+    <div
-      <PreferenceCheckbox
+      class="control-group user-allow-pm"
-        @labelKey="user.allow_private_messages"
+      data-setting-name="user-allow-private-messages"
-        @checked={{this.model.user_option.allow_private_messages}}
+    >
-      />
+      <div class="controls">
-    </div>
+        <PreferenceCheckbox
-  </div>
+          @labelKey="user.allow_private_messages"
-
+          @checked={{this.model.user_option.allow_private_messages}}
-  <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>
-      <div class="instructions">{{i18n
+    </div>
-          "user.allowed_pm_users_instructions"
+
-        }}</div>
+    <div
-    {{/if}}
+      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}}